关于vant-ui-vue 的datepicker 时间选择错乱问题的处理

Emma_Maria2025-12-19 11:54

背景：需求要求选择日期的控件限制从当前时间之后的半年，故在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;
    },