Shulou(Shulou.com)06/03 Report--

Editor to share with you how to solve the element-ui date and time selector date formatting problem, I believe that most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to know it!

Recently, I was working on the background management page of vue+element-ui, in which DateTimePicker was used to select the date and time, but I encountered some troublesome problems in the process of passing the data back to the background. Record the solution here so as not to encounter it again in the future.

Front-end page

Front-end code

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:' + error) Type: true})} else {this.$message ('Verification error: please make sure the information is complete')}) }

Entity class code

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 code

@ PostMapping ("/ order-record") public CommonResult addOrderRecord (OrderRecordDO orderRecordDO) throws ParseException {System.out.println ("added reservation record:" + orderRecordDO); orderRecordDOMapper.insertSelective (orderRecordDO); return null;}

Console output

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 java.lang.String 0012; nested exception is java.lang.IllegalArgumentException]]

After looking at the output information of the console, we probably know that the front end transmits the date as a String type, but we use the Date type to define the date in the background, so the conversion exception reported here. Originally, I wanted to use SimpleDateFormat to convert it, but I thought it was troublesome, and then I looked up the relevant information on the Internet and found that there could be a simpler way.

Try 1:

Add @ DateTimeFormat (pattern = "yyyy-MM-dd HH:mm:ss") to the entity class field

@ DateTimeFormat (pattern = "yyyy-MM-dd HH:mm:ss") private Date orderDate

Console output

Added appointment record: {"id": null, "title": "Test 1", "hospitalId": 1001, "orderDate": "Wed Apr 10 10:00:00 CST 2019", "orderType": 2001, "petVariety": "husky", "mobilePhone": "1000", "supplement": "Erha"}

Database record

Database record

Problem encountered: unfriendly display at the front end after getting data from the database

Display

Try 2: add @ DateTimeFormat (pattern = "yyyy-MM-dd HH:mm:ss") and @ JsonFormat (pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8") to the entity class field

/ * timezone = "GMT+8" specified time zone * / @ DateTimeFormat (pattern = "yyyy-MM-dd HH:mm:ss") @ JsonFormat (pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8") private Date orderDate

Front-end display effect: this will show the effect we want.

Front-end display

Try 3: my background project was built using SpringBoot, and I added the following configuration to the application.yml file

# configure data source 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 # the date sent from the front end of Vue is of String type, and the following settings can automatically convert it to Date type There is no need to manually convert mvc: date-format: yyyy-MM-dd HH:mm:ss # the following settings can automatically convert the Date type to a date in the following format, specifying the time zone used by the Jackson format date. Jackson defaults to UTC jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: GMT+8

Display effect

Display

Summary:

The date is passed from front end to back end (added), parsed from String type to Date type, from back end to front end (query), and parsed from Date type to String type

You can use annotations, @ DateTimeFormat, @ JsonFormat

You can use configuration files, spring.mvc.date-format, spring.jackson.date-format/time-zone

Why set up time-zone? Because Jackson uses the UTC time zone by default, you need to manually specify the time zone as GMT+8

Attachment: original time 2019-04-12 12:00:00, difference of 8 hours

Do not specify a time zone

The above is all the contents of this article entitled "how to solve the date formatting problem of element-ui date-time Selector". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.