详解element-ui日期时间选择器的日期格式化问题


Posted in Javascript onApril 08, 2019

最近在做vue+element-ui的后台管理页面,其中用到了DateTimePicker来选择日期时间,但是在将数据传回后台的过程中遇到了一些令人头疼的问题,在此记录一下解决方案,以免日后再次遇到。

详解element-ui日期时间选择器的日期格式化问题

前端页面

前端代码

submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          let url = 'http://localhost:8088/pethospital/order-record'
          let data = qs.stringify({
            title: this.orderForm.title,
            hospitalId: this.orderForm.hospitalId,
            orderDate: this.orderForm.orderDate,
            orderType: this.orderForm.orderType,
            petVariety: this.orderForm.petVariety,
            mobilePhone: this.orderForm.mobilePhone,
            supplement: this.orderForm.supplement
          })
          if (valid) {
            axios.post(url, data)
              .then(response => {
            
              }).catch(error => {
              this.$message({
                message: '错误:' + error,
                type: true
              })
            })
          } else {
            this.$message('验证错误:请确认信息是否填写完整')
          }
        });
      }

实体类代码

private Long id;
private String title;
private Integer hospitalId;
private Date orderDate;
private Integer orderType;
private String petVariety;
private String mobilePhone;
private String supplement;

Controller代码

@PostMapping("/order-record")
  public CommonResult addOrderRecord(OrderRecordDO orderRecordDO) throws ParseException {
    System.out.println("添加的预约记录:" + orderRecordDO);
    orderRecordDOMapper.insertSelective(orderRecordDO);
    return null;
  }

控制台输出

Field error in object 'orderRecordDO' on field 'orderDate': rejected value [2019-04-10 10:00:00]; codes [typeMismatch.orderRecordDO.orderDate,typeMismatch.orderDate,typeMismatch.java.util.Date,typeMismatch]; arguments [org.springframework.context.support.DefaultMessageSourceResolvable: codes [orderRecordDO.orderDate,orderDate]; arguments []; default message [orderDate]]; default message [Failed to convert property value of type 'java.lang.String' to required type 'java.util.Date' for property 'orderDate'; nested exception is org.springframework.core.convert.ConversionFailedException: Failed to convert from type [java.lang.String] to type [java.util.Date] for value '2019-04-10 10:00:00'; nested exception is java.lang.IllegalArgumentException]]

看了控制台的输出信息,大概知道是前端将日期当做String类型传输的,但是我们后台定义日期用的是Date类型,因此这里报的转换异常。本来我想用SimpleDateFormat来转换的,但是觉得这样很麻烦,然后在网上查找相关资料发现可以有更简单的方法。

尝试1:

在实体类字段上添加@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")

@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
  private Date orderDate;

控制台输出

添加的预约记录:{"id":null,"title":"测试1","hospitalId":1001,"orderDate":"Wed Apr 10 10:00:00 CST 2019","orderType":2001,"petVariety":"哈士奇","mobilePhone":"1000","supplement":"二哈"}

数据库记录

详解element-ui日期时间选择器的日期格式化问题

数据库记录

遇到的问题:从数据库获取数据后在前端显示不友好

详解element-ui日期时间选择器的日期格式化问题

显示

尝试2: 在实体类字段添加@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")和@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")

/**
   * timezone = "GMT+8"指定时区
   */
  @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
  @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
  private Date orderDate;

前端显示效果:这下就能显示成我们想要的效果了

详解element-ui日期时间选择器的日期格式化问题

前端显示

尝试3:我的后台项目使用SpringBoot搭建的,我在application.yml文件中添加如下配置

# 配置数据源
spring:
 datasource:
  name: pet-hospital
  type: com.alibaba.druid.pool.DruidDataSource
  url: jdbc:mysql://localhost:3306/pet_hospital?serverTimezone=GMT%2B8
  driver-class-name: com.mysql.cj.jdbc.Driver
  username: root
  password: 1741248769
 # Vue前端传来的日期为String类型,下面的设置可以自动将其转换为Date类型,不需要手动转换
 mvc:
  date-format: yyyy-MM-dd HH:mm:ss
 # 以下设置可以将Date类型自动转换为如下格式的日期,指定Jackson格式化日期使用的时区,Jackson默认使用UTC
 jackson:
  date-format: yyyy-MM-dd HH:mm:ss
  time-zone: GMT+8

显示效果

详解element-ui日期时间选择器的日期格式化问题

显示

总结:

  • 日期从前端传到后端(添加),由String类型解析成Date类型,从后端传到前端(查询),由Date类型解析成String类型
  • 可以使用注解的方式,@DateTimeFormat、@JsonFormat
  • 可以使用配置文件方式,spring.mvc.date-format、spring.jackson.date-format/time-zone
  • 为什么要设置time-zone?因为Jackson默认使用UTC时区,所以需要手动指定时区为GMT+8

附:原时间2019-04-12 12:00:00,相差8个小时

详解element-ui日期时间选择器的日期格式化问题

不指定时区

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
采用call方式实现js继承
May 20 Javascript
javascript制作坦克大战全纪录(2)
Nov 27 Javascript
JS+CSS实现的拖动分页效果实例
May 11 Javascript
利用jQuery解析获取JSON数据
Apr 08 jQuery
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
node.js学习之事件模块Events的使用示例
Sep 28 Javascript
react中fetch之cors跨域请求的实现方法
Mar 14 Javascript
小程序scroll-view组件实现滚动的示例代码
Sep 20 Javascript
200行HTML+JavaScript实现年会抽奖程序
Jan 22 Javascript
react实现移动端下拉菜单的示例代码
Jan 16 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
Jun 16 Javascript
解决vue init webpack 下载依赖卡住不动的问题
Nov 09 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 #Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 #Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
Apr 08 #Javascript
面试题:react和vue的区别分析
Apr 08 #Javascript
vue router 组件的高级应用实例代码
Apr 08 #Javascript
JavaScript中的一些实用小技巧总结
Apr 07 #Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 #Javascript
You might like
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
2015/04/22 Javascript
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
2017/01/19 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
2017/12/15 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
深入解析ES6中的promise
2018/11/08 Javascript
jquery.pager.js实现分页效果
2019/07/29 jQuery
vue element-ui中table合计指定列求和实例
2020/11/02 Javascript
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
python设置随机种子实例讲解
2019/09/12 Python
python使用 request 发送表单数据操作示例
2019/09/25 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
Python 没有main函数的原因
2020/07/10 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
枚举与#define宏的区别
2014/04/30 面试题
聊城大学毕业生自荐书
2014/02/01 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
业务员岗位职责
2015/02/03 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript
python异常中else的实例用法
2021/06/15 Python
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技