小工具知识网

当前位置: 首页 > 行业知识 > 解决前端ELement UI时间控件el-date-picker提交时间误差8小时

行业知识

解决前端ELement UI时间控件el-date-picker提交时间误差8小时

2026-11-11 02:54:52 来源:互联网转载

问题

前端使用框架与UI:Vue+ElementUI。

在项目开发中使用到了DateTimePicker组件,在选择时间后点击保存,发现前端选中的时间在后端接收时相差了八个小时。

原因

我们国家的标准时间是东经120°时间(东八区),而标准时间是格林威治时间(世界时),两者相差了整整8小时。

解决

网上查的资料大部分是vue2的,需要在el-date-picker中设置value-format属性,value-format=“yyyy-MM-dd HH:mm:ss”。

 

但是,我用的是vue3,加了这个格式之后取到的日期值居然是:yyyy-12-Fr 00:00:00,这是个么鬼呀!!!无奈只能继续查找解决方案,终于让我找到了解决方法:Vue3+ element UI 解决日期时间格式话问题

原来Vue3这个时间格式年月日居然都要大写!!!改成如下写法

 format="YYYY-MM-DD hh:mm:ss" value-format="YYYY-MM-DD hh:mm:ss"

在后端实体类上时间字段添加注解:

@JsonFormat(locale = "zh", timezone = "GMT+8", pattern = "yyyy-MM-dd")private Date scrq;

上一篇:揭秘E4A辅助,撰写有效帮助计划的秘诀!

下一篇:领域专家精心讲解AI视频生成