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 解决办法

<FormItem label="日期">
    <DatePicker type="date" format="yyyy-MM-dd" placement="bottom-end" placeholder="选择日期" :value="formItem.statusDate" @on-change="statusDateChange" ></DatePicker>
    (申报/公开/授权 日期)
</FormItem>
Last modification：October 12th, 2022 at 09:25 am
© 允许规范转载