微信小程序中应用van-calendar时加载时间过长，以及设置min-data无效的问题解决

qiqiliuwu2024-06-01 11:58

一、我们微信小程序中应用van-calendar时，如果没有设置min-data，那么页面的加载时间会非常长，所以，一定一定要配置min-data ；

二、vue中min-data的写法是:min-data="new Date(2023, 0, 1)"，而在小程序中的写法则是min-data="{{ minData }}"，minData的值为：new Date(2023, 0, 1).getTime()。

注意：

1、minData的值只能在js文件中设置，不能直接写进页面里边，因为页面中不能识别 new Date()，会报错；
2、一定要加上.getTime()，不然也无法生效；

html 复制代码

错误一：
<van-calendar
  class="van-calendar"
  show="{{dataPickVisble}}"
  :min-date="minDate"
  bind:confirm="confirmDate"
  bind:close="closeDatePopup"
/>

错误二：
<van-calendar
  class="van-calendar"
  show="{{dataPickVisble}}"
  :min-date="{{ new Date(2023, 0, 1) }}"
  bind:confirm="confirmDate"
  bind:close="closeDatePopup"
/>

错误三：
<van-calendar
  class="van-calendar"
  show="{{dataPickVisble}}"
  :min-date="{{ minDate }}"
  bind:confirm="confirmDate"
  bind:close="closeDatePopup"
/>

javascript 复制代码

data： {
	minDate: new Date(2023, 0, 1)
}

正确写法：

html 复制代码

<van-calendar
  class="van-calendar"
  show="{{dataPickVisble}}"
  :min-date="{{ minDate }}"
  bind:confirm="confirmDate"
  bind:close="closeDatePopup"
/>

javascript 复制代码

data： {
	minDate: new Date(2023, 0, 1).getTime()
}