邹平做网站公司,界首网站建设,重庆市建设安全监督站的网站,网站数据分析工具1. 微信小程序开发 picker选择年月日时分秒 微信小程序的多列选择器实现一个包含年月日及小时分钟秒的自定义日期时间选择器。通过定义外部工具类来处理不同月份天数的变化及联动效果#xff0c;实现了一个灵活且易于使用的日期时间选择组件。 微信小程序开发 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()),secowithData(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 modemultiSelector value{{dateTime}} bindtappickerTap bindchangechangeDateTime bindcolumnchangechangeDateTimeColumn range{{dateTimeArray}}{{!!currentTime?currentTime:----}}
/picker1.3. timeDate.js
import dateTimePicker from ../../public/js/dateHelper
const mydatenew 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 dateTimeArraythis.data.dateTimeArray,dateTimee.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});}
})
