element和element-plus8小时时差问题解决

原创已于 2023-11-11 11:01:16 修改 · 1.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2023-05-26 11:04:10 首次发布

文章提出了在处理日期时间时，避免手动调整时区的方法，特别是在使用Element和Element-Plus组件时。关键在于添加value-format属性，但需要注意大小写和格式的正确匹配。对于Element，类型为datetime的日期选择器应设置为yyyy-MM-ddHH:mm:ss，而Element-Plus则需区分date和datetime类型的格式设定。

有很多博客的解决方案是在提交到后端接口之前调用moment的utcOffset方法手动修改8小时时差，但这样做太麻烦了。这里给出element和element-plus两个版本更优雅的解决方案。

核心就是要增加value-format属性，但是由于element和element-plus的日期格式不一致，所以大小写有所区别，大小写写错的话是没有效果的。

element

<el-date-picker
	v-model="model"
	type="datetime"
	value-format="yyyy-MM-dd HH:mm:ss"
>
</el-date-picker>

element-plus

<el-date-picker
	v-model="model"
	type="date"
	value-format="YYYY-MM-DD"
	format="YYYY-MM-DD"
></el-date-picker>

<el-date-picker
	v-model="model"
	type="date"
	value-format="YYYY-MM-DDTHH:mm:ss"
	format="YYYY-MM-DD"
></el-date-picker>

无论type是date还是datetime都可以用这种解决方法。