应用场景是项目中的条件查询,开始时间不能大于结束时间,反之结束时间不能小于开始时间,如下图:
HTML:
<el-form-item label="查询时间:">
<el-date-picker
v-model="params.beginDate"
:picker-options="startTime"
type="date"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期:"
></el-date-picker>
</el-form-item>
<el-form-item label="至" label-width="26px" align="center">
<el-date-picker
:picker-options="endTime"
v-model="params.endDate"
type="date"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期"
></el-date-picker>
</el-form-item>
JS:
data(){
return{
params:{
endDate: "", //结束时间
beginDate: "" //开始时间
},
/* start 开始时间小于今天,结束时间不能大于开始时间 */
startTime: {
disabledDate: time => {
if (this.params.endDate) {
return (
time.getTime() > new Date(this.params.endDate).getTime()//这里的this.params.endData按自己的字段参数来
);
} else {
return time.getTime() > Date.now();
}
}
},
endTime: {
disabledDate: time => {
if (this.params.beginDate) {
return (
time.getTime() > Date.now() ||
time.getTime() < new Date(this.params.beginDate).getTime() //这里的this.params.beginDate按自己的字段参数来
);
} else {
return time.getTime() > Date.now();
}
}
},
/* end*/
}
}
注意,这里的方法都是放在data里的哦