最近在做小程序時(shí)，需要實(shí)現(xiàn)一個(gè)時(shí)間日期的選擇器箩退，但是小程序的picker組件只支持五種選擇器离熏，分別是普通選擇器、多列選擇器戴涝、時(shí)間選擇器滋戳、日期選擇器、省市區(qū)選擇器啥刻。好像沒有我需要的時(shí)間日期的選擇器呢奸鸯，這該怎么辦？
百度了一下好像也沒有找到我想要的東西可帽，但是在評(píng)論處（不記得在什么地方看到的了）看到一個(gè)網(wǎng)友評(píng)論說可以通過多列選擇器來實(shí)現(xiàn)娄涩。想想確實(shí)可以啊，我怎么就沒想到呢映跟。廢話不多說蓄拣，上代碼：
.wxml
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<input value='{{time}}' placeholder='選擇時(shí)間'/>
</picker>
.js
const date = new Date();
const years = [];
const months = [];
const days = [];
const hours = [];
const minutes = [];
//獲取年
for (let i = 2018; i <= date.getFullYear() + 5; i++) {
years.push("" + i);
}
//獲取月份
for (let i = 1; i <= 12; i++) {
if (i < 10) {
i = "0" + i;
}
months.push("" + i);
}
//獲取日期
for (let i = 1; i <= 31; i++) {
if (i < 10) {
i = "0" + i;
}
days.push("" + i);
}
//獲取小時(shí)
for (let i = 0; i < 24; i++) {
if (i < 10) {
i = "0" + i;
}
hours.push("" + i);
}
//獲取分鐘
for (let i = 0; i < 60; i++) {
if (i < 10) {
i = "0" + i;
}
minutes.push("" + i);
}
Page({
data: {
time: '',
multiArray: [years, months, days, hours, minutes],
multiIndex: [0, 9, 16, 10, 17],
choose_year: '',
},
onLoad: function() {
//設(shè)置默認(rèn)的年份
this.setData({
choose_year: this.data.multiArray[0][0]
})
},
//獲取時(shí)間日期
bindMultiPickerChange: function(e) {
// console.log('picker發(fā)送選擇改變，攜帶值為', e.detail.value)
this.setData({
multiIndex: e.detail.value
})
const index = this.data.multiIndex;
const year = this.data.multiArray[0][index[0]];
const month = this.data.multiArray[1][index[1]];
const day = this.data.multiArray[2][index[2]];
const hour = this.data.multiArray[3][index[3]];
const minute = this.data.multiArray[4][index[4]];
// console.log(`${year}-${month}-${day}-${hour}-${minute}`);
this.setData({
time: year + '-' + month + '-' + day + ' ' + hour + ':' + minute
})
// console.log(this.data.time);
},
//監(jiān)聽picker的滾動(dòng)事件
bindMultiPickerColumnChange: function(e) {
//獲取年份
if (e.detail.column == 0) {
let choose_year = this.data.multiArray[e.detail.column][e.detail.value];
console.log(choose_year);
this.setData({
choose_year
})
}
//console.log('修改的列為', e.detail.column, '努隙，值為', e.detail.value);
if (e.detail.column == 1) {
let num = parseInt(this.data.multiArray[e.detail.column][e.detail.value]);
let temp = [];
if (num == 1 || num == 3 || num == 5 || num == 7 || num == 8 || num == 10 || num == 12) { //判斷31天的月份
for (let i = 1; i <= 31; i++) {
if (i < 10) {
i = "0" + i;
}
temp.push("" + i);
}
this.setData({
['multiArray[2]']: temp
});
} else if (num == 4 || num == 6 || num == 9 || num == 11) { //判斷30天的月份
for (let i = 1; i <= 30; i++) {
if (i < 10) {
i = "0" + i;
}
temp.push("" + i);
}
this.setData({
['multiArray[2]']: temp
});
} else if (num == 2) { //判斷2月份天數(shù)
let year = parseInt(this.data.choose_year);
console.log(year);
if (((year % 400 == 0) || (year % 100 != 0)) && (year % 4 == 0)) {
for (let i = 1; i <= 29; i++) {
if (i < 10) {
i = "0" + i;
}
temp.push("" + i);
}
this.setData({
['multiArray[2]']: temp
});
} else {
for (let i = 1; i <= 28; i++) {
if (i < 10) {
i = "0" + i;
}
temp.push("" + i);
}
this.setData({
['multiArray[2]']: temp
});
}
}
console.log(this.data.multiArray[2]);
}
var data = {
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex
};
data.multiIndex[e.detail.column] = e.detail.value;
this.setData(data);
},
})
