详解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 相关文章推荐
Jquery动态添加及删除页面节点元素示例代码
Jun 16 Javascript
JQuery 在线引用及测试引用是否成功
Jun 24 Javascript
javascript实时显示北京时间的方法
Mar 12 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
对Js OOP编程 创建对象的一些全面理解
Jul 26 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
Nov 29 Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
VUE 配置vue-devtools调试工具及安装方法
Sep 30 Javascript
vue实现鼠标移入移出事件代码实例
Mar 27 Javascript
JavaScript偏函数与柯里化实例详解
Mar 27 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 Google的translate API代码
2008/12/10 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
javascript进行数组追加方法小结
2014/06/16 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
详解Vuex中mapState的具体用法
2017/09/28 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
Vue从TodoList中学父子组件通信
2019/02/05 Javascript
jQuery Migrate 插件用法实例详解
2019/05/22 jQuery
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
浅谈vue项目,访问路径#号的问题
2020/08/14 Javascript
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
测试、预发布后用python检测网页是否有日常链接
2014/06/03 Python
python去掉 unicode 字符串前面的u方法
2018/10/21 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
python实现人工智能Ai抠图功能
2019/09/05 Python
html5 移动端视频video的android兼容(去除播放控件、全屏)
2020/03/26 HTML / CSS
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
new修饰符是起什么作用
2015/06/28 面试题
特色蛋糕店创业计划书
2014/01/28 职场文书
应急管理培训方案
2014/06/12 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP