日期选择器
参考:https://www.jianshu.com/p/3683a931250e
element
提供了开始时间-结束时间的时间选择器,但是有个不太方便的一点就是返回的是一个数组。以下方式是通过两个时间选择器绑定两个控件,实现开始时间早于结束时间,结束时间能晚于开始时间。
组件:
<el-table-column :label="td('时间')" prop="remark">
<template slot-scope="scope">
<el-date-picker
v-model="scope.row.beginTime"
size="mini"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:picker-options="pickerOptionsStart"
type="date"
placeholder="开始时间"
range-separator="-"
@change="changeStart(scope.row)"
></el-date-picker>
-
<el-date-picker
v-model="scope.row.endTime"
size="mini"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:picker-options="pickerOptionsEnd"
type="date"
placeholder="结束时间"
range-separator="-"
@change="changeEnd(scope.row)"
></el-date-picker>
</template>
</el-table-column>
数据定义:
// 日期控件
pickerOptionsStart: {},
pickerOptionsEnd: {},
startDate: "",
endDate: "",
方法:
// 获取时间
changeStart(row) {
this.startDate = row.beginTime;
this.endDate = row.endTime;
this.changeStartDate(row);
},
// 获取时间
changeEnd(row) {
this.startDate = row.beginTime;
this.endDate = row.endTime;
this.changeEndDate(row);
},
// 清除开始时间
RemoveStartDate(row) {
row.beginTime = "";
},
// 清除结束时间
RemoveEndDate(row) {
row.endTime = "";
},
// 开始时间与结束时间判断
// 开始时间事件
changeStartDate(row) {
// 限制开始时间
if(this.endDate != ""){
if(this.startDate >= this.endDate){
this.$message("开始时间必须小于结束时间!");
// 清除开始时间
this.RemoveStartDate(row);
}
}
this.pickerOptionsEnd = Object.assign({},this.pickerOptionsEnd, {
disabledDate: (time) => {
if(this.startDate) {
return time.getTime() < this.startDate;
}
},
})
},
// 结束时间事件
changeEndDate(row) {
// 限制开始时间
if(this.startDate != ""){
if(this.endDate <= this.startDate){
this.$message("结束时间必须大于结束时间!");
// 清除结束时间
this.RemoveEndDate(row);
}
}
this.pickerOptionsStart = Object.assign({},this.pickerOptionsEnd, {
disabledDate: (time) => {
if(this.endDate) {
return time.getTime() > this.endDate;
}
},
})
},