最近在用Element-UI组件做一个日期选择的控件，然后通过日期控件选择出有效的日期时间，传递给后端，后端做相应的处理

但是这里遇到了一些头疼问题：

问题一： DateTimePicker控件显示的格式不正确

首先是Element-UI 日期时间组件默认下的时间格式并不是我们想要的yyyy-MM-dd HH:mm:ss 的格式，我们需要先在DatetimePicker控件的属性中修改它的格式

format属性：指定输入框的格式

value-format属性：指定绑定值的格式

例：

 <span style="left:-100px; position:relative">
          <span class="demonstration" style='margin-right:10px'>开始日期</span>
          <el-date-picker v-model="value1" type="datetime" placeholder="选择日期" format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd hh:mm:ss">
          </el-date-picker>
        </span>
        <span style="left:-70px; position:relative">
          <span class="demonstration" style='margin-right:10px'>截止日期</span>
          <el-date-picker v-model="value2" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd hh:mm:ss">
          </el-date-picker>
        </span>

问题二： 前端发给后端的日期格式正确，但是后端接收之后，格式发生了变化

我们都知道前端JS的数据类型是弱类型的，所以将日期传递给后端的时候是以字符串传递的，但是后端我的实体层中定义的是日期类型来接收

实体：

public class Line {
    private String userName;
    //日期时间格式的处理

//   @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
//   @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
    private String onTime;
    //日期时间格式的处理

//    @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
//    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
    private String downTime;
    private Double spendCash;

在上面的代码中我们可以看到出现了两个注解，这两个注解就是帮助我们前后端日期的交互传递的

@DateTimeFormat（pattern="yyyy-MM-dd HH:mm:ss"）的作用：

有的时候由前台jsp页面填写一个日期，提交到后台的时候，我们希望直接转换成一个Date类型（因为我这里的实体中使用的是Data类型接收的），而不是由一个string 类型接收，然后再通过simpleDateFormat来进行转格式，这样太麻烦了，代码会显的很乱，spring为我们提供了类型转化器，写起来也是很麻烦，我们的需求很简单就是由框架帮我们去自动的转换类型而不是手动的转换，在这样的背景下，我们可以使用@DateTimeFormat注解

 

此外我们还有一个需求就是我们从数据库里面查询到了日期，然后我们想把这个日期自动的变成string类型，这时我们可以使用@JsonFormat注解

@JsonFormat不要忘了加GMT+8 因为我们和UTC（美国）相差8个小时，所以需要加8

 

另外还有一种简单粗暴的方法，就是我们的实体不使用Data类型接收，同样使用String类型来接收，这样也就不需要进行类型转换。