最近在开发一款微信小程序，需要用到里面的时间选择器（picker），根据它本身的特点以及需要开发的内容，我对时间选择器做了一个简单的demo，大家可以看一下效果图。
效果图：
在微信小程序中，文件按照功能分，有js文件（主要写核心事件）、json文件（主要写数据）、wxml（主要是页面结构）和wxss（主要是页面样式）。
index.wxml文件：
在wxml文件中引入picker，设定picker的模式、值发生改变时所绑定的事件函数、选择器列滚动时所绑定的事件函数、以及对应呈现的值等。
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}"><input value='{{time}}' placeholder='选择时间'/></picker>
index.js文件：
在js文件中设置对应的data，同时完成onLoad事件、bindMultiPickerChange事件、bindMultiPickerColumnChange事件等。
//引入事先写好的日期设置util.js文件var datePicker = require('../../utils/dateSetting.js')//设定当前的时间，将其设定为常量const date = new Date();const year = date.getFullYear();const month = date.getMonth() + 1;Page({//与wxml中的数据一一对应，在具体函数中修改time、multiArray、multiIndex等值，进行页面的呈现data: {time: '',multiArray: [],multiIndex: [0, 0, 0, 0, 0],choose_year: "",},//Page原始的加载函数，设定multiArray，其中datePicker中的函数，会在下面的js中呈现。onLoad: function () {this.setData({multiArray:[[year + "年", year + 1 + "年", year + 2 + "年"],datePicker.determineMonth(),datePicker.determineDay(year, month),datePicker.determineHour(),datePicker.determineMinute()],})},//最后呈现时间的函数。bindMultiPickerChange: function (e) {var dateStr = this.data.multiArray[0][this.data.multiIndex[0]] +this.data.multiArray[1][this.data.multiIndex[1]] +this.data.multiArray[2][this.data.multiIndex[2]] +this.data.multiArray[3][this.data.multiIndex[3]] +this.data.multiArray[4][this.data.multiIndex[4]];this.setData({time: dateStr})},//当时间选择器呈现并进行滚动选择时间时调用该函数。bindMultiPickerColumnChange: function (e) {//e.detail.column记录哪一行发生改变，e.detail.value记录改变的值（相当于multiIndex）switch (e.detail.column) {//这里case的值有0/1/2/3/4,但除了需要记录年和月来确定具体的天数外，其他的都可以暂不在switch中处理。case 0://记录改变的年的值let year = this.data.multiArray[0][e.detail.value];this.setData({choose_year: year.substring(0, year.length - 1)})break;case 1://根据选择的年与月，确定天数，并改变multiArray中天的具体值let month = this.data.multiArray[1][e.detail.value];let dayDates = datePicker.determineDay(this.data.choose_year, month.substring(0, month.length - 1));//这里需要额外注意，改变page中设定的data，且只要改变data中某一个值，可以采用下面这种方法this.setData({['multiArray[2]']: dayDates})break;}//同上，上面改变的是二维数组中的某一个一维数组，这个是改变一个一维数组中某一个值，可供参考。this.setData({["multiIndex[" + e.detail.column + "]"]: e.detail.value})},})
utils文件夹中的dateSetting.js文件：
若出现多个时间选择器，且多个页面需要，则可以把公共的函数写出去，这里我写出去了确定月份、日、时和分的函数。
//将当前日期写成常量const date = new Date();const year = date.getFullYear();const month = date.getMonth() + 1;const day = date.getDay()+1;const hour = date.getHours();const minute = date.getMinutes();//确定月份呈现function determineMonth() {let monthDates = [];for (let i = month; i <= 12; i++) {monthDates.push(i + "月");}for (let i = 1; i < month; i++) {monthDates.push(i + "月")}return monthDates;}//根据年与月确定日的呈现function determineDay(year, month) {let dayDates = [];let days;switch (parseInt(month)) {case 1:case 3:case 5:case 7:case 8:case 10:case 12:days = 31;break;case 4:case 6:case 9:case 11:days = 30;break;case 2:if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) {days = 28} else days = 29;}for (let i = day; i <= days; i++) {dayDates.push(i + "日");}for (let i = 1; i <= day; i++) {dayDates.push(i + "日");}return dayDates;}//确定小时的呈现function determineHour() {let hourDates = [];for (let i = hour; i <= 24; i++) {hourDates.push(i + "时");}for (let i = 1; i < hour; i++) {hourDates.push(i + "时");}return hourDates;}//确定分的呈现function determineMinute() {let minuteDates = [];let minuteNum=0;if (parseInt(minute) % 10 >= 5) {minuteNum = (parseInt(minute / 10) + 1) * 10;} else {minuteNum = parseInt(minute / 10) * 10;}for (let i = minuteNum; i < 60; i += 5) {minuteDates.push(i + "分")}for (let i = 0; i < minuteNum; i += 5) {minuteDates.push(i + "分")}return minuteDates;}//将上述函数导出，这样引入文件后可以直接使用导出的函数module.exports = {determineMonth:determineMonth,determineDay:determineDay,determineHour:determineHour,determineMinute:determineMinute,}
结束语：
上述文件完成后，进行编译运行，便可呈现效果图中的功能，希望这篇博客对你有所帮助。
