解决Vant Weapp的 van-datetime-picker组件在使用了filter属性后,默认值获取不到展示值,比较笨的方法
如上图,点击展开时间选择后,由于使用了filter属性,分钟数是指定了可选范围,此时不去滑动列表触发change事件,那么得到的时间就不为所展示的时间。
index.wxml
<van-popup
show="{{ showDatePicker }}"
position="bottom"
bind:close="hiddenDatePickerView"
custom-style="height: 300px;"
>
<van-datetime-picker
type="datetime"
value="{{ currentSelectDate }}"
min-date="{{ startDate }}"
max-date="{{ endDate }}"
bind:confirm="selectDateTime"
bind:cancel="hiddenDatePickerView"
filter="{{ dateFilter }}"
formatter="{{ dateFormatter }}"
/>
</van-popup>
index.js
Page({
data: {
showDataPicker: false,
startDate: +new Date(),
endDate: dayjs().add(1, 'month').valueOf(),
currentSelectDate: null, // 存放当前所选时间
_options: [0, 15, 30, 45], // 同下面dateFilter取的间隔一致,若dateFilter更改,此处对应更改
dateFilter(type, options) {
if(type === 'minute) {
return options.filter(( options ) => options % 15 === 0);
}
return options;
},
dateFormatter(type, value) {
if (type === 'year') {
return `${value}年`;
}else if (type === 'month') {
return `${value}月`;
}else if (type === 'day') {
return `${value}日`;
}else if (type === 'hour') {
return `${value}时`;
}else if (type === 'minute') {
return `${value}分`;
}
return value;
},
}, // data 结束
// 弹出层关闭
hiddenDatePickerView() {
this.setData({ showDatePicker: false })
},
// 处理所选时间
selectDateTime(e) {
let that = this;
let systemTime = moment(e.detail).minutes(); // 获取当前系统时间的分钟数
const { _options } = that.data;
// 解决展开弹出层后,不滑动触发change事件,直接点击确定,获取到所展示的时间
for(let i = 0; i < _options.length; i++) {
if(i !== 3) {
if(_options[i] < systemTime && systemTime <= _options[i + 1]) {
that.setData({
currentSelectDate: +moment(moment(e.detail).minute(_options[i + 1])),
showDatePicker: false,
})
} else if(systemTime === 0) {
that.setData({
currentSelectDate: +moment(moment(e.detail).minute(_options[0])),
showDatePicker: false,
})
} else if(45 < systemTime) {
that.setData({
currentSelectDate: +moment(moment(e.detail).minute(60)),
showDatePicker: false,
})
}
}
}
}
})
这样子currentSelectDate的值在默认情况下就能够取到所展示的值。