详解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 相关文章推荐
非常不错的一个javascript 类
Nov 07 Javascript
JavaScript的9个陷阱及评点分析
May 16 Javascript
javascript 验证日期的函数
Mar 18 Javascript
jQuery LigerUI 使用教程入门篇
Jan 18 Javascript
javascript时区函数介绍
Sep 14 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
JavaScript流程控制(分支)
Dec 06 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
PHP获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
php向js函数传参的几种方法
2014/08/10 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
我用的一些Node.js开发工具、开发包、框架等总结
2014/09/25 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
js判断一个字符串是否包含一个子串的方法
2015/01/26 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
Vue2.0使用过程常见的一些问题总结学习
2017/04/10 Javascript
js中apply与call简单用法详解
2017/11/06 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
vue实现商品加减计算总价的实例代码
2018/08/12 Javascript
webpack打包非模块化js的方法
2018/10/24 Javascript
axios使用拦截器统一处理所有的http请求的方法
2018/11/02 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
js用正则表达式筛选年月日的实例方法
2021/01/04 Javascript
Python字符串处理函数简明总结
2015/04/13 Python
python实现的守护进程(Daemon)用法实例
2015/06/02 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
Django在Model保存前记录日志实例
2020/05/14 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
阿里巴巴美国:Alibaba美国
2019/11/24 全球购物
90后毕业生的求职信范文
2013/09/21 职场文书
酒店管理专业学生求职信
2013/09/27 职场文书
环卫工人节活动总结
2014/08/29 职场文书
租车协议书
2015/01/27 职场文书
2015年教师节慰问信
2015/03/23 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
毕业设计工作总结
2015/08/14 职场文书
生鲜超市—未来中国最具有潜力零售业态
2019/08/02 职场文书
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server
Selenium浏览器自动化如何上传文件
2022/04/06 Python