关于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;
    },
相关推荐
Dabei2 小时前
Android 语音助手简单实现与语音助手“执行任务”交流
android·前端
dongczlu2 小时前
iOS 循环引用篇 菜鸟都能看懂
前端
Alsn862 小时前
26.IDEA 专业版中创建简单的 Web 项目并打包部署到本地Tomcat 9
前端·tomcat·intellij-idea
霍理迪2 小时前
HTML行内块标签——img、表单、音视频标签
前端·html
小小前端_我自坚强2 小时前
边缘函数 (Edge Functions)详解
前端
幼儿园技术家2 小时前
Hydration Mismatch 原理详解:SSR 项目中最容易踩的坑
前端
BW.SU2 小时前
RUI Builder-图形化UI设计-工程范例
stm32·单片机·嵌入式硬件·ui·界面设计·单片机驱动彩屏·ra8889
June bug2 小时前
【Vue】EACCES: permission denied 错误
前端·javascript·vue.js
陈随易2 小时前
PostgreSQL v18发布,新增AIO uuidv7 OAuth等功能
前端·后端·程序员