详解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 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
理解Javascript_02_理解undefined和null
Oct 11 Javascript
javascript算法学习(直接插入排序)
Apr 12 Javascript
json格式的时间显示为正常年月日的方法
Sep 08 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
如何将php数组或者对象传递给javascript
Mar 20 Javascript
JavaScript阻止事件冒泡示例分享
Dec 28 Javascript
JS动态修改iframe高度和宽度的方法
Apr 01 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
一次记住JavaScript的6个正则表达式方法
Feb 22 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中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
PHP简洁函数小结
2011/08/12 PHP
PHP运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
PHP编程 SSO详细介绍及简单实例
2017/01/13 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
简单理解vue中track-by属性
2016/10/26 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
Windows环境下python环境安装使用图文教程
2018/03/13 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
一文带你了解Python中的字符串是什么
2018/11/20 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
解决Django中调用keras的模型出现的问题
2019/08/07 Python
Python中模块(Module)和包(Package)的区别详解
2019/08/07 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
python groupby 函数 as_index详解
2019/12/16 Python
pytorch GAN伪造手写体mnist数据集方式
2020/01/10 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
python中二分查找法的实现方法
2020/12/06 Python
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
职专应届生求职信
2013/11/16 职场文书
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL