详解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 parseInt与Number函数的区别
Jan 21 Javascript
js实现文本框中焦点在最后位置
Mar 04 Javascript
jQuery 插件开发指南
Nov 14 Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 Javascript
jquery原理以及学习技巧介绍
Nov 11 Javascript
原生JS实现拖拽图片效果
Aug 27 Javascript
JS实现图片的不间断连续滚动的简单实例
Jun 03 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
JavaScript+CSS相册特效实例代码
Sep 07 Javascript
解决iView中时间控件选择的时间总是少一天的问题
Mar 15 Javascript
js使用formData实现批量上传
Mar 27 Javascript
vue使用Font Awesome的方法步骤
Feb 26 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中操作Excel实例代码
2010/04/29 PHP
php数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
纯php生成随机密码
2015/10/30 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
关于javascript模块加载技术的一些思考
2014/11/28 Javascript
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
webpack多页面开发实践
2017/12/18 Javascript
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
python中requests小技巧
2017/05/10 Python
遗传算法python版
2018/03/19 Python
python多维数组切片方法
2018/04/13 Python
python 自动去除空行的实例
2018/07/24 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
年度考核自我评价
2014/01/25 职场文书
土木工程师职业规划范文
2014/03/07 职场文书
毕业生应聘求职信
2014/07/10 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
三峡大坝导游词
2015/01/31 职场文书
2015年老干部工作总结
2015/04/23 职场文书
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs
使用Django框架创建项目
2022/06/10 Python