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

背景:需求要求选择日期的控件限制从当前时间之后的半年,故在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;
    },
相关推荐
bearpping8 小时前
Nginx 配置:alias 和 root 的区别
前端·javascript·nginx
@大迁世界8 小时前
07.React 中的 createRoot 方法是什么?它具体如何运作?
前端·javascript·react.js·前端框架·ecmascript
January12078 小时前
VBen Admin Select 选择框选中后仍然显示校验错误提示的解决方案
前端·vben
. . . . .8 小时前
前端测试框架:Vitest
前端
xiaotao1319 小时前
什么是 Tailwind CSS
前端·css·css3
战南诚10 小时前
VUE中,keep-alive组件与钩子函数的生命周期
前端·vue.js
发现一只大呆瓜10 小时前
React-彻底搞懂 Redux:从单向数据流到 useReducer 的终极抉择
前端·react.js·面试
霍理迪10 小时前
Vue的响应式和生命周期
前端·javascript·vue.js
李剑一10 小时前
别再瞎写了!Cesium 模型 360° 环绕,4 套源码全公开,项目直接用
前端