vue中el-date-picker组件的使用，时间传参格式问题

Element ui中的时间组件：（时间段，开始日期至结束日期）<el-form :inline="true" :model="filters" size="small"><el-form-item><el-date-picker v-model="filters.timeSlice" type="daterange" range-separator="至" st

文章共491字 · 阅读需要大约2分钟

一键AI生成摘要，助你高效阅读

问答

weixin_43890049

13813人浏览 · 2021-08-02 13:15:59

weixin_43890049 · 2021-08-02 13:15:59 发布

Element ui中的时间组件：（时间段，开始日期至结束日期）

<el-form :inline="true" :model="filters" size="small">
    <el-form-item>
      <el-date-picker v-model="filters.timeSlice" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" ></el-date-picker>
    </el-form-item>
</el-form>

el-date-picker中的值以数组的形式存在，且时间格式如下：

Sat Jul 31 2021 00:00:00 GMT+0800 (中国标准时间)
Sat Jul 31 2021 00:00:00 GMT+0800 (中国标准时间)

向后台传参：时间框的数据是数组的格式，可以拆分为开始时间和结束时间。

// 获取分页数据
findPage: function (data) {
  let beginTime = null
  let endTime = null
  //获取时间框中的值
  if(this.filters.timeSlice!=null){
    beginTime = this.filters.timeSlice[0]
    endTime = this.filters.timeSlice[1]
    console.log(beginTime)
    console.log(endTime)
  }
}

后台接收参数：（则前台传来的参数必须是 yyyy-MM-ddTH:mm:ss的形式后台才能正确接收）

@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private LocalDateTime beginTime;    //开始时间
@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private LocalDateTime endTime;  //结束时间

则需要在el-date-picker 加上 value-format="yyyy-MM-ddTHH:mm:ss"，如下：

<el-form-item>
  <el-date-picker v-model="filters.timeSlice" type="daterange" range-separator="至" value-format="yyyy-MM-ddTHH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期" ></el-date-picker>
</el-form-item>

注意：前台的时间参数需要在 index10 加上T，否则后台参数不能正确接收。