小程序日期时间选择组件无bug版，不服来用

本文主要是介绍小程序日期时间选择组件无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版，不服来用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---