详解元素用户界面日期时间选择器的日期格式化问题

最近在做某视频剪辑软件元素用户界面的后台管理页面，其中用到了日期控件来选择日期时间，但是在将数据传回后台的过程中遇到了一些令人头疼的问题，在此记录一下解决方案，以免日后再次遇到。

前端页面

前端代码

提交表单(表单名){这.$refs[formName].验证((有效)={ let URL=' http://localhost :8088/pethospital/order-record ' let data=QS。stringify({ title : this。订单。标题，医院：这个。订单。医院id，订单日期：这个。订单。订单日期，订单类型：订单。订单类型，宠物品种：这个。订单。petvarieve，手机：然后（响应={ })。捕捉(错误={这个.$message({ message: '错误： '错误，键入： true })})else { this .$message('验证错误：请确认信息是否填写完整') } });}实体类代码

二等兵龙id；私有字符串标题；私人整数医院；私人日期订单日期；私有整数订单类型；私有字符串宠物品种；私人字符串手机；私人字符串补充；控制器代码

@PostMapping('/order-record ')公共公共结果附加记录(订单记录)引发ParseException {系统。出去。println('添加的预约记录：' OrderRecordDo)；ordererecorddomapper。插入选择性(orderecorddo)；返回null}控制台输出

字段"订单日期":的对象"订单记录"中的字段错误拒绝值[2019-04-10 10:00:00];代码[类型不匹配。orderRecordDO.orderDate，类型不匹配。订单日期，类型不匹配。java.util.Date，类型不匹配];参数[组织弹簧框架。语境。支持。defaultmessagesourceresolvable :代码[orderRecordDO.orderDate，订单日期]；参数[];默认消息[订单日期]]；默认消息[无法将" java.lang.String "类型的属性值转换为属性"订购日期"所需的" java.util.Date "类型；嵌套异常为组织。弹簧框架。核心。转换。对话失败，除了：未能将值"2019-04-10 10:00:00"从类型[java.lang.String]转换为类型[Java。乌提尔。日期]；嵌套异常是Java。朗。illegalargumentexception]]

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

尝试1:

在实体类字段上添加@DateTimeFormat(模式=' yyyy-MM-DD hh :MM :s ')

@DateTimeFormat(模式=' yyyy-MM-DD hh :MM :s ')私有日期订单日期控制台输出

添加的预约记录：{“id”: null，“title”:测试1 ','住院' :1001,'订单日期' : ' 2019年四月10日星期三10:00:00 CST '，'订单类型' :2001,'宠物品种' : '哈士奇，《手机》:《1000》,《增刊》:二哈'}

数据库记录

数据库记录

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

显示

尝试2: 在实体类字段添加@DateTimeFormat(模式=' yyyy-MM-DD hh :MM :s ')和@JsonFormat(模式=' yyyy-MM-DD hh :MM :s '，时区='格林尼治时间8点')

/** *时区='格林尼治时间8 '指定时区*/@DateTimeFormat(模式=' yyyy-MM-DD hh :MM 3360s ')@ JsonFormat(模式=' yyyy-MM-DD hh :MM 3360s '，时区='格林尼治时间8点')私有订单日期前端显示效果：这下就能显示成我们想要的效果了

前端显示

尝试3:我的后台项目是使用SpringBoot构建的，我在application.yml文件中添加了以下配置

#配置数据源spring : data source : name : pet-hospital type 3360 com . Baba . druid . pool . druid data source : JDBC : my SQL 3360//localhost :3306/pet _ hospital？服务器时区=GMT 8 driver-class-name : com . MySQL . CJ . JDBC . driver username 3360 root密码3360 1741248769 # the前端发送的日期为String类型。以下设置可以自动将其转换为日期类型，而无需手动转换MVC : Date-format : yyy-mm-ddhh :mm 3360 ss #以下设置可以自动将日期类型转换为以下格式的日期，并指定Jackson用来格式化日期的时区。默认情况下，Jackson使用UTC Jackson :日期格式： yyyy-mm-DD hh :mm : ss时区： GMT 8来显示效果

显示

总结：

日期从前端传输到后端(添加)，从字符串类型解析到日期类型，从后端传输到前端(查询)，从日期类型解析到字符串类型。@DateTimeFormat和@JsonFormat可以使用配置文件。spring.mvc.date-format和spring . Jackson . date-format/time-zone为什么要设置时区？由于杰克逊默认使用UTC时区，因此需要手动将时区指定为GMT 8。附：2019-04-12 12:00:00，差8小时

未指定时区

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。