微信小程序picker选择年月日+时分秒

picker可选的选择器类型有：
selector 普通选择器
multiSelector 多列选择器
time 时间选择器
date 日期选择器
region 省市区选择器
时间选择器是时分秒
日期选择器是年月日
然而并没有年月日+时分秒的选择器类型
本文介绍使用多列选择器实现年月日+时分秒选择器

一、index.wxml

<picker mode="multiSelector" value="{{dateTime}}" bindtap="pickerTap" bindchange="changeDateTime" bindcolumnchange="changeDateTimeColumn" range="{{dateTimeArray}}">
    {{!!currentTime?currentTime:'----'}}
</picker>

二、index.js

var dateTimePicker = require('../index/dateTimePicker.js')//引入外部的js工具类
const mydate=new Date();
Page({
   data: {
      dateTimeArray: null,
      dateTime: null,
      startYear: 2015,
      endYear: 2050,
      currentTime:mydate.toLocaleDateString()+' '+mydate.getHours()+':'+mydate.getMinutes()+':'+mydate.getSeconds()
   },
   onLoad:function(e){
      var obj = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear, this.data.currentTime);
      console.log(obj.dateTimeArray)
      this.setData({
         dateTimeArray: obj.dateTimeArray,
         dateTime: obj.dateTime
      });
   },
   pickerTap: function (e) {
      var obj = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear, this.data.currentTime);
      console.log(obj.dateTimeArray)
      this.setData({
         dateTimeArray: obj.dateTimeArray,
         dateTime: obj.dateTime
      });
   }
   , changeDateTime(e) {
      var dateTimeArray=this.data.dateTimeArray,dateTime=e.detail.value;
      this.setData({
         // dateTime: e.detail.value,
         currentTime: dateTimeArray[0][dateTime[0]] + '-' + dateTimeArray[2][dateTime[2]] + '-' + dateTimeArray[4][dateTime[4]] + ' ' + dateTimeArray[6][dateTime[6]] + ':' + dateTimeArray[8][dateTime[8]]+':'+dateTimeArray[10][dateTime[10]]
      });
      console.log(this.data.dateTimeArray)
   },
   changeDateTimeColumn(e) {
      var arr = this.data.dateTime, dateArr = this.data.dateTimeArray;
      arr[e.detail.column] = e.detail.value;
      dateArr[4] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[2][arr[2]]);
      this.setData({
         dateTimeArray: dateArr,
         dateTime: arr
      });
   }
})

• 此处需要注意引入了外部的工具类dateTimePicker，需要自己定义工具类，后面会有工具类中的具体代码，require('../index/dateTimePicker.js')这里的路径是工具类dateTimePicker所在的位置。

• onload事件和picker单击事件pickerTap的代码完全相同，主要是为了第一次单击能够渲染出数据，如果不写onload事件，放到项目中第一次单击时会渲染不出来数据。

三、工具类 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) {
    console.log(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() {//如果dateTimePicker的date不可能为空，此处可以省略
    // 当前时间的处理
    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 getcurrent(date) {
    console.log(date)
    var d = new Date(date);
    console.log(d)
    var year = withData(d.getFullYear()),
        month = withData(d.getMonth() + 1),
        dat = withData(d.getDate()),
        hour = withData(d.getHours()),
        minu = withData(d.getMinutes()),
        seco=withData(d.getSeconds());
    return [year, '年', month, '月',dat , '日',hour , ':',minu ,':',seco]
}
function dateTimePicker(startYear, endYear, date) {
    var datearr = [];
    if (date) {
        datearr = getcurrent(date);
    }
    console.log(datearr)
    // 返回默认显示的数组和联动数组的声明
    var dateTime = [], dateTimeArray = [[], [], [], [], [], [], [], [], []];
    var start = startYear || 1978;
    var end = endYear || 2100;
    // 默认开始显示数据
    var defaultDate = date ? datearr : getNewDateArry();
    console.log(defaultDate)
    // 处理联动列表数据
    /*年月日 时分*/
    dateTimeArray[0] = getLoopArray(start, end);
    dateTimeArray[1] = ['年'];
    dateTimeArray[2] = getLoopArray(1, 12);
    dateTimeArray[3] = ['月'];
    dateTimeArray[4] = getMonthDay(defaultDate[0], defaultDate[2]);
    dateTimeArray[5] = ['日'];
    dateTimeArray[6] = getLoopArray(0, 23);
    dateTimeArray[7] = [':'];
    dateTimeArray[8] = getLoopArray(0, 59);
    dateTimeArray[9] = [':'];
    dateTimeArray[10] = getLoopArray(0, 59);

    dateTimeArray.forEach((current, index) => {
        dateTime.push(current.indexOf(defaultDate[index]));
    });

    return {
        dateTimeArray: dateTimeArray,
        dateTime: dateTime
    }
}
module.exports = {
    dateTimePicker: dateTimePicker,
    getMonthDay: getMonthDay
}