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

文章讲述了在Vue3项目中使用ElementUI的DateTimePicker组件时,由于时区差异导致前端选中的时间与后端接收不一致。解决方法是在Vue3中调整`format`和`value-format`为小写,同时在后端添加时间字段的JSONFormat注解以确保正确解析。
摘要由CSDN通过智能技术生成

问题
前端使用框架与UI:Vue+ElementUI。
在项目开发中使用到了DateTimePicker组件,在选择时间后点击保存,发现前端选中的时间在后端接收时相差了八个小时。

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

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

<el-date-picker
    v-model="value"
    type="datetime"
    value-format="yyyy-MM-dd HH:mm:ss"
    placeholder="选择日期时间">
</el-date-picker>

但是,我用的是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;

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值