微信小程序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 }); } })