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

1. 微信小程序开发 picker选择年月日+时分秒

  微信小程序的多列选择器实现一个包含年月日及小时分钟秒的自定义日期时间选择器。通过定义外部工具类来处理不同月份天数的变化及联动效果，实现了一个灵活且易于使用的日期时间选择组件。
  微信小程序开发 picker选择年月日+时分秒需要注意引入了外部的工具类dateTimePicker，需要自己定义工具类，后面会有工具类中的具体代码，require(‘…/index/dateTimePicker.js’)这里的路径是工具类dateTimePicker所在的位置。
  onload事件和picker单击事件pickerTap的代码完全相同，主要是为了第一次单击能够渲染出数据，如果不写onload事件，放到项目中第一次单击时会渲染不出来数据。

1.1. 工具类 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
}

1.2. timeDate.wxml

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

1.3. timeDate.js

import dateTimePicker from '../../public/js/dateHelper'
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});}
})