解决elementui日期时间选择器提交时与后台date类型不匹配问题

问题描述:

  在前端使用elementui的日期时间选择器后,在通过axios进行提交的时候,前端控制台出现了400(数据类型不匹配的错误)的错误。

 <el-form-item label="跟进时间" prop="traceTime">
                <el-date-picker
                        v-model="customerTraceHistory.traceTime"
                        type="datetime"
                        placeholder="跟进时间">
                </el-date-picker>
 </el-form-item>

错误的原因:后台实体类的注解问题

错误前的代码:

   @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    public Date getTraceTime() {
        return traceTime;
    }

    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
    public void setTraceTime(Date traceTime) {
        this.traceTime = traceTime;
    }

解决之后的代码:

   @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    public Date getTraceTime() {
        return traceTime;
    }

    @JsonFormat(pattern = "yyyy-MM-dd",timezone = "GMT+8")
    public void setTraceTime(Date traceTime) {
        this.traceTime = traceTime;
    }

原文地址:https://www.cnblogs.com/wanghj-15/p/11283851.html

时间: 2024-07-30 03:06:25

解决elementui日期时间选择器提交时与后台date类型不匹配问题的相关文章

日期时间选择器插件flatpickr

前言:在网页上需要输入时间的时候,我们可以用HTML5的inputl中的date类型.但是如下入所示,有些浏览器不支持.flatpickr这个小插件可以解决这个问题. 1.flatpickr日期时间选择器插件的github地址为:https://chmln.github.io/flatpickr/. 2.里面有很多例子,告诉我们呢怎么设置,不过太多很容易让人眼花.我这里做一个最简单的例子. 2.1引用人家的css和js //路径一定要写对 <link rel="stylesheet&quo

日期时间选择器

日期时间选择器,精确到秒 GetDate.java package com.tfj.demo; import java.awt.Dimension; import java.awt.Point; import java.awt.Toolkit; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.text.DateFormat; import java.text.SimpleDa

日期时间选择器:datetimepicker

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>演示:日期时间选择器:datetimepicker</title> <link rel="stylesheet" type="text/css" href="css/main.css" /> <link rel=&quo

Android中实现日期时间选择器(DatePicker和TimePicker)

利用Android应用框架提供的DatePicker(日期选择器)和TimePicker(时间选择器),实现日期时间选择器. Dialog的Content布局文件(date_time_dialog.xml): <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

Android日期时间选择器实现以及自定义大小

本文主要讲两个内容:1.如何将DatePicker和TimePicker放在一个dialog里面:2.改变他们的宽度: 问题1:其实现思路就是自定义一个Dialog,然后往里面同时放入DatePicker和TimePicker,直接贴代码: date_time_picker.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://s

JS日期时间选择器

本文介绍一种日期和时间选择器的用法.此选择器由jqueryUI实现,支持精确到毫秒的时间选择. 此选择器项目地址为http://trentrichardson.com/examples/timepicker/ Demo地址为:http://www.helloweba.com/demo/timepicker/ 下载地址:http://download.csdn.net/detail/yanwushu/7721933 效果图 另外关于js时间选择器还可以参考其他项目 http://www.bootc

开发路程(11): 日期时间选择器datetimepicker

在做项目中,往往会遇到需要用户输入2014-07-19 09:55:53这样的格式的数据.就是典型的年月日时分秒这样的格式.这个时候,使用datetimepicker会比较简单. DateTimePicket jQuery 插件:使用此插件非强制性地将 datetimepicker. datepicker 或 timepicker 下拉列表添加到您的窗体.就是这样.很好看吧. 添加jquery.datetimepicker和datetimepicker.css到您的页面: 1 <link rel

纯js可定制的跨浏览器日期时间选择器插件

Rome是一款纯js可定制的跨浏览器日期时间选择器插件.该日期时间选择器不依赖于jQuery,但它依赖于moment.js.可以通过CSS文件来自定义该日期时间选择器的外观样式. 如果你想了解moment的国际化的信息,可以查看这里.你还可以点击这里查看moment的使用方法. 在线演示:http://www.htmleaf.com/Demo/201503091491.html 下载地址:http://www.htmleaf.com/jQuery/Calendar-Date-Time-picke

基于Bootstrup的jQuery日期时间选择器

bootstrap-datetimepicker是一款基于Bootstrup 3的超实用jQuery日期时间选择器.通过该插件你可以非常容易的创建很酷的bootstrup样式的日期时间选择器. 你也可以通过修改css文件来自定义它的样式. 该jQuery日期时间选择器的最小外部依赖需求是: jQuery Moment.js Bootstrap.js(如果你不想使用完整的bootstrup,至少需要transition 和collapse) Bootstrap Datepicker script