Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug Report] DateTimePicker设置minDate后快速选中后值有问题 #11878

Closed
Pasoul opened this issue May 18, 2023 · 2 comments
Closed

[Bug Report] DateTimePicker设置minDate后快速选中后值有问题 #11878

Pasoul opened this issue May 18, 2023 · 2 comments

Comments

@Pasoul
Copy link

Pasoul commented May 18, 2023

重现链接

https://github.com/Pasoul/vant-bug
或者在手机上打开此链接:http://js.jirengu.com/befohevihi

Vant 版本

2.12.54

描述一下你遇到的问题。

DateTimePicker组件设置type为date,并且指定minDate为2023/05/17,滑动月份至6月,再滑动月份至5月快速点击确定,选中的日期是05/01,指定的minDate无效,这是我复现视频

normal.video.mp4

重现步骤

  1. 打开我提供的html文件,然后本地启动一个server,通过手机打开demo(PC上因为手势问题不好复现)
  2. 滑动月份至6月,此时日期选择的是6月1号,然后滑动日期至5月,此时快速点击确定,confirm的回调函数传过来选择的日期是5月1号,说明minDate无效
  3. 再次点击确定,confirm的回调函数传过来选择的日期是5月17号

感觉像是异步更新this.innerValue导致的问题

看了下DatePicker.js的formatValue方法:

formatValue(value) {
      if (!isDate(value)) {
        return null;
      }

      let minDate = new Date(this.minDate);
      let maxDate = new Date(this.maxDate);

      if (this.originColumns) {
        const dates = Object.keys(dateMethods)
          .map(
            (type) =>
              dateColumns.filter((item) => item.type === type)[0]?.values
          )
          .filter((item) => item);
        // 没有深入研究,不明白为什么要修改minDate和maxDate的值
        minDate = new Date(...dates.map((val) => getTrueValue(val[0])));
        maxDate = new Date(...dates.map((val) => getTrueValue(val[1])));
      }
      // 如果拿value和this.minDate和this.maxDate原始值比,最终透传出去的值肯定不会比minDate小吧,只是个人猜测
      value = Math.max(value, minDate.getTime());
      value = Math.min(value, maxDate.getTime());

      return new Date(value);
},

设备/浏览器

No response

@Pasoul Pasoul changed the title DateTimePicker设置minDate后快速选中后值有问题 [Bug Report] DateTimePicker设置minDate后快速选中后值有问题 May 24, 2023
@tansan-dev
Copy link

emit('confirm', params);

这里使用的params是在nextTick前获取的,此时columns还没有更新。

@chenjiahan
Copy link
Member

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants