微信小程序picker重写，精确到时分秒

https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

微信小程序提供的picker组件，只精确到分，项目中需要秒，就重写一个

项目例子地址：https://github.com/zhaobao1830/ylzs.git 体征信息录入页面 sign-input.wxml

timePicker.js

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}
function getLoopArray(start, end) {
  var start = start || 0;
  var end = end || 1;
  var array = [];
  for (var i = start; i <= end; i++) {
    array.push(formatNumber(i));
  }
  return array;
}
function getNewTimeArry() {
  // 当前时间的处理
  var newDate = new Date();
  var hour = formatNumber(newDate.getHours()),
    minu = formatNumber(newDate.getMinutes()),
    seco = formatNumber(newDate.getSeconds());

  return [hour, minu, seco];
}
function timePicker(date) {
  // 返回默认显示的数组和联动数组的声明
  var time = [];
  var timeArray = [[], [], []];
  // 默认开始显示数据
  var defaultTime = date ? [...date.split(':')] : getNewTimeArry();
  // 处理联动列表数据
  /*时分秒*/
  timeArray[0] = getLoopArray(0, 23);
  timeArray[1] = getLoopArray(0, 59);
  timeArray[2] = getLoopArray(0, 59);
  timeArray.forEach((current, index) => {
    time.push(current.indexOf(defaultTime[index]));
  });
  return {
    timeArray: timeArray,
    time:time,
  }
}
module.exports = {
  timePicker: timePicker
}

util.js

const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

const formatDay = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()

  return [year, month, day].map(formatNumber).join('-')
}
// 时分秒
const formatTimeN = date => {
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return [hour, minute, second].map(formatNumber).join(':')
}
const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}

module.exports = {
  formatTime: formatTime,
  formatDay: formatDay,
  formatTimeN: formatTimeN,
  formatNumber: formatNumber
}

sign-input.wxml：

<view class="dateM item-con">
        <text>时间：</text>
        <picker mode="multiSelector" value="{{startTime}}" bindchange="startTimeChange" bindcolumnchange="startTimeColumn" range="{{startTimeArray}}">
          <view class="picker">
            {{startTimeArray[0][startTime[0]]}}:{{startTimeArray[1][startTime[1]]}}:{{startTimeArray[2][startTime[2]]}}
          </view>
        </picker>
</view>

sign-input.js

// pages/sign-input/sign-input.js
var util = require("../../utils/util");
var timePicker = require('../../utils/timePicker.js');
var nowDate = new Date();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    dateY: util.formatDay(nowDate), // 日期
    startTime: util.formatTimeN(nowDate),
    dateM: '', // 时间
    temperature: '',
    bloodSugar: '',
    bloodPressure: '',
    urineVolume: '',
    intakeVolume: '',
    liquidOutput: '',
    stoolFrequency: ''
  },
  formSubmit: function (e) {
    var submitSign = e.detail.value
    submitSign.dateY = this.data.dateY
    var startTime = this.data.startTime
    for (var i = 0; i < startTime.length; i++) {
      startTime[i] = util.formatNumber(startTime[i])
    }
    submitSign.dateM = startTime.join(":")
    var storageSignList = wx.getStorageSync('signList');
    storageSignList.push(submitSign)
    wx.setStorageSync('signList', storageSignList)
    this.toastShow()
    this.formReset()
  },
  formReset: function () {
    var dataY = util.formatDay(nowDate)
    var obj = timePicker.timePicker(util.formatTimeN(nowDate));
    this.setData({
      dateY: dataY,
      startTime: obj.time,
      startTimeArray: obj.timeArray,
      temperature: '',
      bloodSugar: '',
      bloodPressure: '',
      urineVolume: '',
      intakeVolume: '',
      liquidOutput: '',
      stoolFrequency: ''
    })
  },
  // 选择时间的时候触发
  startTimeColumn(e) {
    var startTimeArr = this.data.startTime;
    startTimeArr[e.detail.column] = e.detail.value
    this.setData({
      startTime: startTimeArr
    });
  },
  // 确定的时候触发
  startTimeChange: function (e) {
    var startTimeArr = this.data.startTime;
    startTimeArr[e.detail.column] = e.detail.value;
    this.setData({
      startTime: startTimeArr
    });

  },
  // 提示信息
  toastShow () {
    wx.lin.showToast({
      title: '添加成功~',
      icon: 'success',
      iconStyle: 'color:#7ec699; size: 60',
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(util.formatTimeN(nowDate))
    // 获取时分秒数组，在页面中显示
    var obj = timePicker.timePicker(util.formatTimeN(nowDate));
    this.setData({
      startTimeArray: obj.timeArray,
      startTime: obj.time
    });
  }
})