关于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;
    },
相关推荐
时间的情敌22 分钟前
Cesium 加载 3D Tiles 倾斜摄影、压平、样式设置(Vue3 实战)
vue.js·3d·cesium
IT_陈寒1 小时前
Java开发实战:从入门到精通
前端·人工智能·后端
风骏时光牛马1 小时前
生成一个AI转岗经历标题,只需要一个标题,不需要其他的任何文本。
前端
Csvn10 小时前
Monorepo
前端
Csvn10 小时前
流水线
前端
Csvn11 小时前
微前端架构
前端
Linux-lucky12 小时前
45-Linux学习之旅之防火墙与WEB加固
linux·前端·网络·学习·ubuntu
风骏时光牛马14 小时前
生成一个移动端标题,只需要一个标题,不需要其他的任何文本。
前端
IT_陈寒15 小时前
Redis雪崩把我坑惨了,这是5年经验的教训
前端·人工智能·后端
SameX15 小时前
HarmonyOS ArkUI List 的侧滑删除 用 ListItem 的 swipeAction + endIcon 的做法
前端