Vuetify v-date-picker切换type从month到date时报错如何解决？

报错原因 #

v-date-picker 不同 type 对应的v-model值格式不兼容：

• type为month时，绑定值格式为 YYYY-MM（或对应精度的日期对象）
• type为date时，绑定值要求为 YYYY-MM-DD（或对应精度的日期对象）
  切换type时旧值不符合新type的格式要求，就会触发组件内部的格式校验报错。

修复方案 #

方案1：添加动态key强制组件重新渲染（最简便） #

给v-date-picker绑定和calType关联的动态key，type切换时组件会销毁重建，自动适配新类型的格式要求，无需额外处理值逻辑：

<v-date-picker
  full-width
  :locale="currentLocale"
  v-model="form.date"
  :range="range"
  :type="calType"
  :first-day-of-week="1"
  :key="calType"
>
</v-date-picker>

方案2：切换type时同步格式化绑定值 #

监听calType的变化，切换类型时主动把form.date转换为对应type的合法格式，比如从month切到date时，默认补全为当月第一天：

watch(() => calType, (newType, oldType) => {
  if (!form.date) return
  // 从month切换到date，补全为当月第一天
  if (oldType === 'month' && newType === 'date') {
    form.date = `${form.date}-01`
  }
  // 从date切换到month，截取到年月
  if (oldType === 'date' && newType === 'month') {
    form.date = form.date.slice(0,7)
  }
})

方案3：切换type前清空绑定值 #

如果不需要保留之前选择的时间，切换类型前先清空form.date即可避免格式冲突：

watch(() => calType, () => {
  form.date = null
})

内容的提问来源于stack exchange，提问作者morteza mortezaie