经验笔记 - 03_iView DatePicker组件数据回显日期格式错误

欢迎访问笔者个人技术博客： http://rukihuang.xyz/

iView DatePicker组件数据回显日期格式错误

1 问题描述

• 表单提交后期需要修改，涉及到表单数据回显，其中用到了iView的DatePicker组件，在重新提交回显数据时，发生了错误，日期时间的格式不是预期的yyyy-MM-dd，而是标准时间格式Tue Sep 20 2022 00:00:00 GMT+0800(中国标准时间)，导致java后台程序时间解析报错，数据update失败。

java.text.ParseException: Unparseable date: "Tue Sep 20 2022 00:00:00 GMT+0800(中国标准时间)"

2 问题原因

• 出现问题的前端代码

<FormItem label="日期">
    <DatePicker type="date" format="yyyy-MM-dd" placement="bottom-end" placeholder="选择日期" v-model="formItem.statusDate" @on-change="statusDateChange" ></DatePicker>
    (申报/公开/授权 日期)
</FormItem>

• 查阅iview官方文档发现，v-model绑定日期数据时，值为date类型，回显数据在双重绑定时，格式发生转换错误，在字符串和date类型之间不断变化，导致表单更新时好时坏。
  

3 解决办法

• 经过网上的查询，在这篇文章ivew日期选择器，双向绑定日期格式，执行回调后不改变格式发现同类型问题，将v-model改为:value，并配合@on-change即可

<FormItem label="日期">
    <DatePicker type="date" format="yyyy-MM-dd" placement="bottom-end" placeholder="选择日期" :value="formItem.statusDate" @on-change="statusDateChange" ></DatePicker>
    (申报/公开/授权 日期)
</FormItem>