Vant: [Bug Report] Calendar组件设置min-date、max-date和default-date时，日历初始空白

[wg5945]

设备 / 浏览器

iphone 8p

Vant 版本

2.4.7

Vue 版本

2.6.11

重现链接

https://codesandbox.io/s/vant-issue-moban-5d9nf

描述问题

Calendar组件设置min-date、max-date和default-date时，日历控件首次弹出日期全部显示空白
向上滑动一下后才能显示出来

[chenjiahan]

试了下没问题呢，你用的版本是 2.4.7 吗，这个问题之前修复过

[wg5945]

@chenjiahan

修改了下demo，vant 版本是2.4.7，加了个页面跳转比较容易再现

https://codesandbox.io/s/vant-issue-moban-o6jlc

我的手机是iphone 8p

需要滑动一下日期才会显示出来

[chenjiahan]

是在手机上偶现吗？ 我在电脑上试了下正常

[wg5945]

@chenjiahan 试验了几款手机，iphone 8p，iphone 7必现，安卓的几款貌似正常

另外chrome上我也能复现的啊，就下面那个链接直接打开
https://codesandbox.io/s/vant-issue-moban-o6jlc

[chenjiahan]

我这儿还是不能复现喔，能帮忙排查下吗

日历组件是只渲染视图区域的内容的，其他内容区域默认为空白界面，上图看起来是有问题的

[langyuxiansheng]

我也有这个问题，在部分的iOS 设置 还有小米 mix3上面 还有华为的
目前就这几个设备重现，别的都是正常的，虽然是空白，但是滑动一下就正常了。

[langyuxiansheng]

版本号：

[wg5945]

目前只能先模拟下滑动了，凑合下，复工了再说

if (document.getElementsByClassName('van-calendar__body')[0]) {
  const back = document.getElementsByClassName('van-calendar__body')[0].scrollTop
  document.getElementsByClassName('van-calendar__body')[0].scrollTop = back - 10
  setTimeout(() => {
    document.getElementsByClassName('van-calendar__body')[0].scrollTop = back
  }, 100)
}

[langyuxiansheng]

这段代码加到哪里呢

[wg5945]

@langyuxiansheng
calendar弹出的时候，相当于模拟你手滑的动作

[langyuxiansheng]

 this.$nextTick(() => {
                if (document.getElementsByClassName('van-calendar__body')[0]) {
                    const back = document.getElementsByClassName('van-calendar__body')[0].scrollTop;
                    document.getElementsByClassName('van-calendar__body')[0].scrollTop = back - 10;
                    setTimeout(() => {
                        document.getElementsByClassName('van-calendar__body')[0].scrollTop = back;
                    }, 100);
                }
            });

这样才行

[langyuxiansheng]

还有bug。。。。 直接就滑到最小的那个日期了

[chenjiahan]

能否按照这个 commit 在本地修改代码试一下 @wg5945 @langyuxiansheng

对应文件：node_modules/vant/es/cadenlar/index.js

https://github.com/youzan/vant/commit/f507b99cb762f24ec45cb69477e6357d7a4bd005

[langyuxiansheng]

明天试一下呢

[chenjiahan]

已发布 2.5.0 版本，可以试一下喔

[wg5945]

@chenjiahan 更新了2.5.0，貌似并没有修复

https://codesandbox.io/s/vant-issue-moban-zb067

[chenjiahan]

找到问题了，是因为元素高度为小数导致边界情况判断有误，下个版本会修复

[wg5945]

十分感谢

[chenjiahan]

已在 2.5.1 版本修复

[qc-web-y]

我都2.5.3了还是出现这个问题，只要动态传default-date默认值就会这样

[chenjiahan]

@qc-web-y 能否提供下 codesandbox 复现链接

[zkeyword]

2.5.9 还会

[comlejade]

2.6.0 iphone8p还是有这个问题

[chenjiahan]

有木有复现链接呀？

[comlejade]

有木有复现链接呀？

不要天天回答的那么死板，谷歌浏览器的调试模式下看不出来，我的iphone8p的真机上有问题，随便搞个demo试试就有了

[comlejade]

我设置的最小值是2000/01/01,最大值是当前日期，默认值是当前日期

[comlejade]

这样可以暂时解决问题，最后减70都不行，要减80以上

[chenjiahan]

不要天天回答的那么死板，谷歌浏览器的调试模式下看不出来，我的iphone8p的真机上有问题，随便搞个demo试试就有了

每周处理几十个 issue，没时间去“试”你的问题，提供复现链接是最基本的要求。

[davecat]

2.6.0 iphone x 复现该问题。设置default-date 后会出现日历组件初始化失败情况。正如楼上描述，手指滚动下就能显示出来，但是会直接滚动到minDate 处。体验差。我这边采用了一个hack方法，用v-if重新让日历组件状态重建，解决了这个问题。感觉像是组件内部状态没处理好。这个不能修复的话，打算自己实现这个日历组件。

[comlejade]

2.6.0 iphone x 复现该问题。设置default-date 后会出现日历组件初始化失败情况。正如楼上描述，手指滚动下就能显示出来，但是会直接滚动到minDate 处。体验差。我这边采用了一个hack方法，用v-if重新让日历组件状态重建，解决了这个问题。感觉像是组件内部状态没处理好。这个不能修复的话，打算自己实现这个日历组件。

我在codesandbox上试了，没能复现这个问题，但是我项目里引入这个组件有问题，因为是内部项目无法提供源码，所以只能像上面那样凑合着用。感觉是前面有什么代码影响了，不过没找出来。新建个页面单独使用没发现问题。

[haocaiMP]

我也遇到了，vant 2.8.7 版本 ios 7p 11pro

[xiang1128]

2.10.6版本的日历在所有机型（包括模拟器上）当滑动日期到两个月份的临界点时页面和title会一直抖动，原因未知。

[wxlaionangog]

iphone6sp 系统ios13.4.1 vant 版本2.10.11 , 复现日历初始空白问题, 浏览器无法复现

使用vant 2.8.6 版本无问题