本文主要是介绍小程序日期时间选择组件无bug版，不服来用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
该组件达到一个目的，就是日期和时间共同选择，时间精确到分钟。
<picker mode="multiSelector" bindchange="bindMultiPickerChangedb" bindcolumnchange="bindMultiPickerColumnChangedb" range="{{dateTimeArray1}}" value="{{dateTime1}}">
<view class="weui-label fontlittle">取车时间</view>
<view class="weui-label fontcolor">{{dateTimeArray1[1][dateTime1[1]]}}-{{dateTimeArray1[2][dateTime1[2]]}}</view>
<view class="weui-label fontlittle">{{dateTimeArray1[3][dateTime1[3]]}}:{{dateTimeArray1[4][dateTime1[4]]}}</view>
</picker>
js代码：
const date = new Date();
Page({
data:{
"dateTimeArray1": [],
"dateTime1":null,
"dateTimeArray2": [],
"dateTime2": null,
"begintime":"",
"endtime":"",
},
onLoad: function (options) {
var that = this;
if (wx.getStorageSync('begintime')) {
that.setData({
begintime: wx.getStorageSync('begintime')
});
}else{
that.setData({
begintime: date.getFullYear() + '-' + (date.getMonth()) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':00'
});
}
var obj1 = app.dateTimePicker.dateTimePicker(date.getFullYear(), date.getFullYear() + 2,that.data.begintime);
that.setData({
dateTimeArray1: obj1.dateTimeArray,
dateTime1: obj1.dateTime,
});
},
bindMultiPickerChangedb:function(e){
var that = this;
that.setData({ dateTime1: e.detail.value });
},
bindMultiPickerColumnChangedb:function(e){
var that = this;
var arr = that.data.dateTime1;
if(e.detail.column==1){
var rm = e.detail.value + 1;
var maxday = 31;
if(rm == 1||rm == 3||rm == 5||rm == 7||rm == 8||rm == 10||rm == 12){
maxday = 31;
}
if (rm == 4 || rm == 6 || rm == 9 || rm == 11) {
maxday = 30;
}
if (rm == 2){
maxday = (arr[0] % 400 == 0 || (arr[0] % 4 == 0 && arr[0] % 100 != 0))?29:28;
}
var array = [];
for (var i = 1; i <= maxday; i++) {
array.push(i < 10 ? '0' + i : '' + i);
}
that.data.dateTimeArray1[2] = array;
that.setData({
dateTimeArray1: that.data.dateTimeArray1,
});
}
var dateArr = that.data.dateTimeArray1;
arr[e.detail.column] = e.detail.value;
that.setData({
//dateTimeArray1: dateArr,
dateTime1: arr
});
var year = that.data.dateTimeArray1[0][that.data.dateTime1[0]];
var month = that.data.dateTimeArray1[1][that.data.dateTime1[1]];
var day = that.data.dateTimeArray1[2][that.data.dateTime1[2]];
var hour = that.data.dateTimeArray1[3][that.data.dateTime1[3]];
var minute = that.data.dateTimeArray1[4][that.data.dateTime1[4]];
that.setData({
begintime: year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':00'
});
wx.setStorageSync('begintime', that.data.begintime);
}
})
dateTimePicker.js
function withData(param) {
return param < 10 ? '0' + param : '' + param;
}
function getLoopArray(start, end) {
var start = start || 0;
var end = end || 1;
var array = [];
for (var i = start; i <= end; i++) {
array.push(withData(i));
}
return array;
}
function getMonthDay(year, month) {
var flag = year % 400 == 0 || (year % 4 == 0 && year % 100 != 0), array = null;
switch (month) {
case '01':
case '03':
case '05':
case '07':
case '08':
case '10':
case '12':
array = getLoopArray(1, 31)
break;
case '04':
case '06':
case '09':
case '11':
array = getLoopArray(1, 30)
break;
case '02':
array = flag ? getLoopArray(1, 29) : getLoopArray(1, 28)
break;
default:
array = '月份格式不正确，请重新输入！'
}
return array;
}
function getNewDateArry() {
// 当前时间的处理
var newDate = new Date();
var year = withData(newDate.getFullYear()),
mont = withData(newDate.getMonth() + 1),
date = withData(newDate.getDate()),
hour = withData(newDate.getHours()),
minu = withData(newDate.getMinutes()),
seco = withData(newDate.getSeconds());
return [year, mont, date, hour, minu, seco];
}
function dateTimePicker(startYear, endYear, date) {
// 返回默认显示的数组和联动数组的声明
//var dateTime = [], month = [],dateTimeArray = [[], [], [], [], [], []];
var dateTime = [], month = [],dateTimeArray = [[], [], [], [], []];
var start = startYear || 1978;
var end = endYear || 2100;
// 默认开始显示数据
var defaultDate = date ? [...date.split(' ')[0].split('-'), ...date.split(' ')[1].split(':')] : getNewDateArry();
// 处理联动列表数据
month[1] = getMonthDay(defaultDate[0], 1);
month[2] = getMonthDay(defaultDate[0], 2);
month[3] = getMonthDay(defaultDate[0], 3);
month[4] = getMonthDay(defaultDate[0], 4);
month[5] = getMonthDay(defaultDate[0], 5);
/*年月日 时分秒*/
dateTimeArray[0] = getLoopArray(start, end);
dateTimeArray[1] = getLoopArray(1, 12);
dateTimeArray[2] = getMonthDay(defaultDate[0], defaultDate[1]);
dateTimeArray[3] = getLoopArray(0, 23);
dateTimeArray[4] = getLoopArray(0, 59);
//dateTimeArray[5] = getLoopArray(0, 59);
dateTimeArray.forEach((current, index) => {
dateTime.push(current.indexOf(defaultDate[index]));
});
//console.log(dateTimeArray);
return {
dateTimeArray: dateTimeArray,
dateTime: dateTime
}
}
module.exports = {
dateTimePicker: dateTimePicker,
getMonthDay: getMonthDay
}
这篇关于小程序日期时间选择组件无bug版，不服来用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
