此方法不是禁用不满足条件的日期,而是以提示的方式添加约束
<el-form-item label="开始日期"
prop="startDate">
<el-date-picker v-model="sizeForm.startDate"
:clearable='false'
type="datetime"
@change='changeStartTime'
placeholder="开始日期"
align="right">
</el-date-picker>
</el-form-item>
<el-form-item label="结束日期"
prop="endDate">
<el-date-picker v-model="sizeForm.endDate"
:clearable='false'
type="datetime"
@change='changeEndTime'
placeholder="结束日期"
align="right">
</el-date-picker>
</el-form-item>
data() {
return {
sizeForm: {
startTime: null,
endTime: null,
},
// 开始和结束日期转换的时间戳
startTime: null,
endTime: null,
}
}
methods:{
//选择日期后触发change方法,将开始和结束时间转为时间戳进行对比,不符合约束条件就清空该日期重新选择
changeStartTime(val) {
let date = new Date(val).getTime();
this.startTime = date;
if (this.endTime) {
if (this.endTime < this.startTime) {
this.$message.success('开始时间不能大于结束时间');
this.sizeForm.startDate = '';
this.startTime = null;
}
}
},
changeEndTime(val) {
let date = new Date(val).getTime();
this.endTime = date;
if (this.startTime) {
if (this.endTime < this.startTime) {
this.$message.success('结束时间不能小开始时间');
this.sizeForm.endDate = '';
this.endTime = null;
}
}
},
}