【vue3 Element-plus 日期控件DatePicker 回显的日期是前一天】

原创已于 2024-02-05 10:36:11 修改 · 693 阅读

CC 4.0 BY-SA版权

文章标签：

于 2024-02-05 10:30:17 首次发布

文章讲述了在SpringBoot项目中，如何使用ElementUI的el-date-picker组件处理日期选择时的格式问题，包括输入框显示格式、绑定值格式的设置，以及在实体类和数据库字段中对应的日期格式配置。

<el-date-picker 
	v-model="planModel.planDate" 
	type="date" placeholder="选择日期" :size= 'small'
	/>

日期选择：
在这里插入图片描述

但是回显的日期是2024-02-04
在这里插入图片描述

添加value-format=“YYYY-ＭＭ-DD”
注意控件属性中有两个format
1、format 显示在输入框中的格式
2、value-format 可选，绑定值的格式。
我们对这两个属性都设置成：“YYYY-ＭＭ-DD”

<el-date-picker 
	v-model="planModel.planDate" 
	format="YYYY-MM-DD" value-format="YYYY-MM-DD"
	type="date" placeholder="选择日期" :size= 'small'
	/>

一般是在实体类中进行设置

@JsonFormat(pattern = "yyyy-MM-dd")
private LocalDate planDate;

plan_date date