Nuxt3中Vue DatePicker设置max-date后选择按钮禁用问题求助

环境与配置 #

• NuxtJS 版本：3.7.4
• @vuepic/vue-datepicker 版本：^7.2.2
• 组件代码：

<VueDatePicker v-model="date" :disabled-week-days="[6, 0]" :min-date="minDate" :max-date="maxDate"></VueDatePicker>

问题现象 #

已配置min-date和max-date，日期显示符合预期且可点击，但选中max-date对应的日期时，选择按钮处于禁用状态，该问题已在Playground复现。

解决方法 #

1. 修正max-date的时间范围 #

问题大概率是max-date的时间默认是当天00:00:00，而选中的日期会包含当前时分秒，导致实际时间超出max-date的限制。只需把max-date的时间设为当天的最后一刻：

// 示例：设置maxDate为2023-10-30 23:59:59
const maxDate = new Date('2023-10-30');
maxDate.setHours(23, 59, 59, 999);

2. 统一日期格式 #

给组件添加date-format属性，强制选中的日期只保留年月日部分，避免时间差异导致校验失败：

<VueDatePicker 
  v-model="date" 
  :disabled-week-days="[6, 0]" 
  :min-date="minDate" 
  :max-date="maxDate"
  date-format="YYYY-MM-DD"
></VueDatePicker>

3. 升级组件版本 #

该版本的组件可能存在max-date校验的bug，尝试升级到最新稳定版：

npm update @vuepic/vue-datepicker

内容的提问来源于stack exchange，提问作者Rodrigo Rubio