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