SpringBoot-（六）Springboot+Vue前后端分离项目中使用ElementUI的时间日期选择器传参问题

本文最后更新于：April 28, 2022 pm

SpringBoot框架中有两个非常重要的策略：开箱即用和约定优于配置。其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。

目录

出错原因代码：

1
2
3
4
5
6
<el-date-picker
    v-model="form.item_time"
    type="datetime"
    format="yyyy-MM-dd HH:mm:ss" 
    placeholder="选择日期和时间">
</el-date-picker>

或者是format也没有。

需要指定传参的格式。在Vue中添加如下：

1
2
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"

最后成功代码：

1
2
3
4
5
6
7
<el-date-picker
    v-model="form.item_time"
    type="datetime"
    format="yyyy-MM-dd HH:mm:ss"
    value-format="yyyy-MM-dd HH:mm:ss"
    placeholder="选择日期和时间">
</el-date-picker>

提示

需要在实体类中对应的属性上使用：

1
2
3
@JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private Date item_time; //物品真正加入时间

注意（2022.4.28）

需要注意：ElementUI和Element-Plus格式化的时候，大小写是不一样的。前者年份小写，而后者要大写。所以上面的用法可能是不行的。具体可见官网 ElementUI Element-Plus 

1
2
3
4
5
6
7
<el-date-picker
  v-model="form.fromEndTime"
  type="datetime"
  placeholder="选择结束时间"
  format="YYYY-MM-DD hh:mm:ss"
  value-format="YYYY-MM-DD hh:mm:ss a"
  />