在需求提出的时候就看了下小程序API,发现小程序的时间picker默认mode 只有年月日或者分秒,没有直接的“年-月-日 时:分:秒”组件,于是就需要自己改造了,基于能参照第三方就不先自己造轮子的思想,先在网上找了找,发现https://blog.csdn.net/m0_38082783/article/details/78921283上面的思想挺好,于是对其加以改造,在时间段基础上满足了,最小时间,最大截止时间的选择:
wxml代码:
<view class="picker_wrap">
<picker mode="multiSelector" value="{{dateTime}}" bindchange="changeDateTime" bindcolumnchange="changeDateTimeColumn" range="{{pickerArr}}">
<view class="picker_detail">
{{date}}
</view>
</picker>
<image class="picker_rightarrow" src="../../images/right_arrow.svg"></image>
</view>
js代码块:
const { dateTimePicker, setDateTimeData } = require('./../../utils/dateTimePicker')
//默认最小年份、最大年份
const S_DATE = 2000;
const E_DATE = new Date().getFullYear();
properties: {
datakey: {
type: String,
value: ''
},
initDate: {
type: String,
value: ''
},
minDate: {
type: String,
value: ''
},
maxDate: {
type: String,
value: ''
}
}
initPickerData() {
let { minDate, maxDate, initDate } = this.data;
let startYear = S_DATE, endYear = E_DATE, initDateTimeArr = [[], [], [], [], [], []];
let initYear = new Date(initDate).getFullYear();
this.setData({
currentYear:initYear + ''
})
if (minDate) {
startYear = new Date(minDate).getFullYear();
}
if(maxDate) {
endYear = new Date(maxDate).getFullYear();
}
if (maxDate && initYear === new Date(maxDate).getFullYear()) {
let temp = [];//临时存取当前时间索引数组
let maxMonth = new Date(maxDate).getMonth() + 1;
let maxDay = new Date(maxDate).getDate();
let maxHour = new Date(maxDate).getHours();
let maxMinute = new Date(maxDate).getMinutes();
let maxSecond = new Date(maxDate).getSeconds();
setDateTimeData(initDateTimeArr, startYear, endYear, 0);
setDateTimeData(initDateTimeArr, 1, maxMonth, 1);
setDateTimeData(initDateTimeArr, 1, maxDay, 2);
setDateTimeData(initDateTimeArr, 0, maxHour, 3);
setDateTimeData(initDateTimeArr, 0, maxMinute, 4);
setDateTimeData(initDateTimeArr, 0, maxSecond, 5);
console.log("初始化的数据:", initDateTimeArr)
let tempArr = [...initDate.split(' ')[0].split('-'), ...initDate.split(' ')[1].split(':')];
initDateTimeArr.forEach((current, index) => {
temp.push(current.indexOf(tempArr[index]));
});
this.setData({
dateTime: temp,
pickerArr: initDateTimeArr
})
} else {
let dateObj = dateTimePicker(startYear, endYear, initDate);
let { dateTime, dateTimeArray } = dateObj;
this.setData({
dateTime,
pickerArr: dateTimeArray
});
}
},
getDefaultData() {
let timeArr = this.data.dateTime;
let dateTime = this.setChangeDate(timeArr); // ["2020", "01", "15", "15", "32", "14"]
//显示默认时间操作
let resultDate = this.formatDateTime(dateTime); //2020-01-15 15:32:14
this.setData({
date: resultDate
});
},
changeDateTime(e) {
let array = e.detail.value; // [20, 0, 14, 15, 32, 14] 各列的索引值组成了一个数组
console.log('日期变化', array)
let dateTime = this.setChangeDate(array); // ["2020", "01", "15", "15", "32", "14"]
let resultDate = this.formatDateTime(dateTime); //2020-01-15 15:32:14
this.setData({
dateTime: array,
date: resultDate
})
let resultObj = {};
resultObj[this.data.datakey] = resultDate;
this.triggerEvent('getNewDate', resultObj)
},
setChangeDate(array) {
let dateTime = [];
this.data.pickerArr.forEach((current, index) => {
dateTime.push(current[array[index]]);
});
return dateTime;
},
formatDateTime(dt) {
if (Array.isArray(dt)) {
let Y = dt[0]
let M = dt[1]
let D = dt[2]
let H = dt[3]
let MM = dt[4]
let S = dt[5]
return `${Y}-${M}-${D} ${H}:${MM}:${S}`
}
},
changeDateTimeColumn(e) {
let { minDate, maxDate, initDate, pickerArr } = this.data;
let { column, value } = e.detail;
let startYear = S_DATE, endYear = E_DATE, initDateTimeArr = [[], [], [], [], [], []];
if (minDate) {
startYear = new Date(minDate.replace(/-/g, '/')).getFullYear();
}
if (column === 0) {
this.setData({
currentYear: pickerArr[0][value]
})
}
if (column === 1) {
this.setData({
currentMonth: pickerArr[1][value]
})
}
if (column === 2) {
this.setData({
currentDay: pickerArr[2][value]
})
}
if (column === 3) {
this.setData({
currentHour: pickerArr[3][value]
})
}
if (column === 4) {
this.setData({
currentMinute: pickerArr[4][value]
})
}
if (column === 5) {
this.setData({
currentSecond: pickerArr[5][value]
})
}
const { currentYear, currentMonth, currentDay, currentHour, currentMinute, currentSecond } = this.data;
const nowTime = `${currentYear}/${currentMonth}/${currentDay} ${currentHour}:${currentMinute}:${currentSecond}`;
let nowTimeStramp = new Date(nowTime).getTime();
let maxTimeStramp = new Date(maxDate.replace(/-/g, '/')).getTime();
if (maxDate) {
endYear = new Date(maxDate.replace(/-/g, '/')).getFullYear();
let maxMonth = new Date(maxDate.replace(/-/g, '/')).getMonth() + 1;
let maxDay = new Date(maxDate.replace(/-/g, '/')).getDate();
let maxHour = new Date(maxDate.replace(/-/g, '/')).getHours();
let maxMinute = new Date(maxDate.replace(/-/g, '/')).getMinutes();
let maxSecond = new Date(maxDate.replace(/-/g, '/')).getSeconds();
if (nowTimeStramp < maxTimeStramp) {
setDateTimeData(initDateTimeArr, startYear, endYear, 0);
if(parseInt(this.data.currentYear) === endYear){
setDateTimeData(initDateTimeArr, 1, maxMonth, 1);
}else{
setDateTimeData(initDateTimeArr, 1, 12, 1);
}
if(parseInt(this.data.currentYear) === endYear && parseInt(this.data.currentMonth) === maxMonth) {
setDateTimeData(initDateTimeArr, 1, maxDay, 2);
}else {
let dayArr = getMonthDay(this.data.currentYear,'' + this.data.currentMonth);
initDateTimeArr[2] = dayArr;
}
if(parseInt(this.data.currentYear) === endYear && parseInt(this.data.currentMonth) === maxMonth && parseInt(this.data.currentDay) === maxDay) {
setDateTimeData(initDateTimeArr, 0, maxHour, 3);
}else {
setDateTimeData(initDateTimeArr, 0, 23, 3);
}
if(parseInt(this.data.currentYear) === endYear && parseInt(this.data.currentMonth) === maxMonth && parseInt(this.data.currentDay) === maxDay && parseInt(this.data.currentHour) === maxHour) {
setDateTimeData(initDateTimeArr, 0, maxMinute, 4);
}else {
setDateTimeData(initDateTimeArr, 0, 59, 4);
}
if(parseInt(this.data.currentYear) === endYear && parseInt(this.data.currentMonth) === maxMonth && parseInt(this.data.currentDay) === maxDay && parseInt(this.data.currentHour) === maxHour && parseInt(this.data.currentMinute) === maxMinute) {
setDateTimeData(initDateTimeArr, 0, maxSecond, 5);
}else {
setDateTimeData(initDateTimeArr, 0, 59, 5);
}
this.setData({
pickerArr: initDateTimeArr
})
} else {
setDateTimeData(initDateTimeArr, startYear, endYear, 0);
setDateTimeData(initDateTimeArr, 1, maxMonth, 1);
setDateTimeData(initDateTimeArr, 1, maxDay, 2);
setDateTimeData(initDateTimeArr, 0, maxHour, 3);
setDateTimeData(initDateTimeArr, 0, maxMinute, 4);
setDateTimeData(initDateTimeArr, 0, maxSecond, 5);
this.setData({
pickerArr: initDateTimeArr
})
}
} else {
let dateObj = dateTimePicker(startYear, endYear, initDate);
let { dateTimeArray } = dateObj;
this.setData({
pickerArr: dateTimeArray
});
}
console.log("更新后的数组数据:", initDateTimeArr, this.data.pickerArr);
// 最小时间限制同理
}
//在引入的datetimePicker 里面加入一个函数重新初始化picker数据
const setDateTimeData = function(dateArray,start,end,index){
dateArray[index] = getLoopArray(start,end);
return dateArray;
}
收工!!!