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[] ? n : '' + n
}
function getLoopArray(start, end) {
var start = start || ;
var end = end || ;
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[] = getLoopArray(, );
timeArray[] = getLoopArray(, );
timeArray[] = getLoopArray(, );
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() +
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() +
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[] ? n : '' + 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[][startTime[]]}}:{{startTimeArray[][startTime[]]}}:{{startTimeArray[][startTime[]]}}
</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 = ; 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
});
}
})