html
<picker mode="multiSelector" @change="bindMultiPickerChange($event,1)" @columnchange='bindMultiPickerColumnChange($event,1)'
:value="multiIndex" :range="multiArray">
<view class="uni-input" :class="receiveBeginTime ? 'uni-input-act' : ''">
{{ receiveBeginTime ? receiveBeginTime : '领券开始时间' }}
</view>
</picker>
data
choose_year: '',
multiIndex: [0, 0, 0, 0, 0],
multiIndex2: [0, 0, 0, 0, 0],
multiArray: [[], [], [], [], []],
methods
// 获取时间日期,点击确定时调用
bindMultiPickerChange: function (e,val) {
if(val==1){
this.multiIndex = e.detail.value
}else{
this.multiIndex2 = e.detail.value
}
const index = e.detail.value;
const year = this.multiArray[0][index[0]];
const month = this.multiArray[1][index[1]];
const day = this.multiArray[2][index[2]];
const hour = this.multiArray[3][index[3]];
const minute = this.multiArray[4][index[4]];
let data=year + '/' + month + '/' + day + ' ' + hour + ':' + minute;
if(val==1){
this.receiveBeginTime=year + '-' + month + '-' + day + ' ' + hour + ':' + minute;
this.info.receiveBeginTime=new Date(data).getTime()
}else{
this.receiveEndTime=year + '-' + month + '-' + day + ' ' + hour + ':' + minute;
this.info.receiveEndTime=new Date(data).getTime()
}
},
bindMultiPickerColumnChange: function(e,val) {
if (e.detail.column == 0) {
// 获取年份,为后续计算闰年做准备
let choose_year = this.multiArray[e.detail.column][e.detail.value];
this.choose_year = choose_year
}
if (e.detail.column == 1) {
// 切换月份时,调整日的选择范围
this.setDayArray(e.detail.value)
}
if(val==1){
this.multiIndex[e.detail.column] = e.detail.value;
}else{
this.multiIndex2[e.detail.column] = e.detail.value;
}
},
loopArray(start, end) {
const list = []
for (let i = start; i <= end; i++) {
if (i < 10) {
i = "0" + i;
}
list.push("" + i);
}
return list
},
setDayArray(monthIndex, monthNum = null) {
let num = monthNum || parseInt(this.multiArray[1][monthIndex]);
if (num == 1 || num == 3 || num == 5 || num == 7 || num == 8 || num == 10 || num == 12) {
//判断31天的月份
this.multiArray[2] = this.loopArray(1, 31)
} else if (num == 4 || num == 6 || num == 9 || num == 11) {
//判断30天的月份
this.multiArray[2] = this.loopArray(1, 30)
} else if (num == 2) {
//判断2月份天数
let year = parseInt(this.choose_year);
if (((year % 400 == 0) || (year % 100 != 0)) && (year % 4 == 0)) {
this.multiArray[2] = this.loopArray(1, 29)
} else {
this.multiArray[2] = this.loopArray(1, 28)
}
}
this.$forceUpdate()
},
initDateTime() {
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const hours = date.getHours();
const minutes = date.getMinutes();
this.choose_year = year
this.multiArray = [this.loopArray(year, year + 5), this.loopArray(1, 12), [], this.loopArray(0, 23), this.loopArray(0, 59)] // 分别为年、月、日、时、分的选择范围;其中年份范围从当前年 - 当前年加5
this.setDayArray(0, month) // 计算当前月份的 日 的范围
this.multiIndex = [0, month - 1, day - 1, hours, minutes] // 选择器内的选项值也初始化为当前的日期时间
this.multiIndex2 = [0, month - 1, day - 1, hours, minutes] // 选择器内的选项值也初始化为当前的日期时间
}