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,否则后台参数不能正确接收。