实现结果：
代码：
在utils文件夹中新建一个dateSetting.js的文件，存放代码段
//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++) {
// if(i<10)
// {
// monthDates.push()
// }
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,
}在你所要使用时间选择器的页面中
<view class="endtime">
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{
{multiIndex}}" range="{
{multiArray}}">
<input name="endtime" class="chosetime" value='{
{time}}' placeholder='选择时间' placeholder-class="chosetime-style"/>
</picker>
</view>//js
//引入事先写好的日期设置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: {
photos:[],
time: '',
multiArray: [],
multiIndex: [0, 0, 0, 0, 0],
choose_year: "",
},
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]] +"-";
//月
if(this.data.multiArray[1][this.data.multiIndex[1]]<10)
{
dateStr=dateStr+"0"+this.data.multiArray[1][this.data.multiIndex[1]] +"-";
}
else{
dateStr=dateStr+this.data.multiArray[1][this.data.multiIndex[1]] +"-";
}
//日
if(this.data.multiArray[2][this.data.multiIndex[2]]<10)
{
dateStr=dateStr+"0"+this.data.multiArray[2][this.data.multiIndex[2]]+" ";
}
else{
dateStr=dateStr+this.data.multiArray[2][this.data.multiIndex[2]]+" ";
}
//时
if(this.data.multiArray[3][this.data.multiIndex[3]]<10)
{
dateStr=dateStr+"0"+this.data.multiArray[3][this.data.multiIndex[3]]+":";
}
else
{
dateStr=dateStr+this.data.multiArray[3][this.data.multiIndex[3]]+":";
}
if(this.data.multiArray[4][this.data.multiIndex[4]]<10)
{
dateStr=dateStr+"0"+this.data.multiArray[4][this.data.multiIndex[4]];
}
else{
dateStr=dateStr+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
})
},
})