背景:需求要求选择日期的控件限制从当前时间之后的半年,故在minDate和maxDate中限制了时间,但是在控件中快速选择并点击确认按钮后,选择的时间会错乱,比如当前时间是2025-12-17,用户快速选择年到2016年,会快速变成2026-12-17,导致时间问题(跨年切换,不符合需求的半年要求),要求提示"时间错误"
处理:
1、在onConfirm事件中先看下value值与当前组件内显示的是否一致,我遇到的问题件就是因为快年,滑动到2026年后,后面的月份和日期更新了,但是却没有在value中体现出来,感觉是组件的动态响应事件有问题
2、在不一致的情况下,就需要拿时间去判断之后去做校验了。
javascript
startTimeChange(val) {
// console.log('val', val);
this.formData.endTime = '';
if (val) {
// 判断如果val 小于当前时间(按当前时间精确到60分钟),提示错误
if (dayjs(val).isBefore(dayjs().format('YYYY-MM-DD HH:mm'))) {
this.$toast.fail('请重新选择。');
this.$nextTick(() => {
this.formData.startTime = '';
});
return;
}
this.checkEndDateValid(val, 'startTime');
}
},
endTimeChange(val) {
if (val) {
// 判断如果val 小于当前时间,提示错误
if (dayjs(val).isBefore(dayjs().format('YYYY-MM-DD HH:mm'))) {
this.$toast.fail('请重新选择。');
this.$nextTick(() => {
this.formData.endTime = '';
});
return;
}
this.checkEndDateValid(val, 'endTime');
}
},
checkEndDateValid(date, string) {
const maxDate = dayjs().add(6, 'month').endOf('Day');
// console.log('maxDate', maxDate, dayjs(date).isAfter(maxDate));
if (dayjs(date).isAfter(maxDate)) {
// 使用 nextTick 确保视图更新
this.$nextTick(() => {
if (string === 'startTime') {
this.formData.startTime = '';
}
if (string === 'endTime') {
this.formData.endTime = '';
}
this.refreshDatePicker();
this.$toast.fail(请重新选择。');
});
return false;
}
return true;
},