Vue项目使用AntDesign日期选择器绑定moment格式化值出现Invalid Date

问题原因 #

Ant Design Vue的a-date-picker组件的v-model、default-value属性默认要求传入Moment类型的日期实例，不支持直接传入格式化后的日期字符串。你当前将format生成的字符串绑定给组件后，组件无法解析字符串为内部可用的日期对象，因此会显示Invalid Date。
同时你的代码同时绑定了default-value和v-model，二者功能重叠，也可能引发值的冲突。

解决步骤 #

• 移除多余的格式化操作，直接将Moment实例赋值给绑定变量：

// 直接存储Moment实例，不要调用format转字符串
this.formDates.startPassation = moment(this.$store.state.dataStudy.startPassation)

• 简化模板代码，删除冗余的default-value绑定，如需自定义组件内的日期显示格式，新增format属性即可：

<a-date-picker 
  v-model="formDates.startPassation" 
  format="DD-MM-YYYY HH:mm"
/>

• 若业务场景需要用到格式化后的字符串（比如提交接口、页面展示），在对应逻辑处调用Moment实例的format方法转换即可：

// 提交数据时再转换为目标格式的字符串
const submitStartDate = this.formDates.startPassation.format('DD-MM-YYYY HH:mm')

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