el-date-picker根据开始时间或结束时间禁用前后时间
<template>
<div>
<el-form-item label="开始时间" prop="startTime">
<el-date-picker
v-model="inputForm.startTime"
:disabled="disabled"
value-format="yyyy-MM-dd"
:clearable="true"
type="date"
:append-to-body="false"
placeholder="请选择开始时间"
:picker-options="startTimePickerOptions"
></el-date-picker>
</el-form-item>
<el-form-item label="结束时间" prop="endTime" label-width="110px">
<el-date-picker
v-model="inputForm.endTime"
:disabled="disabled"
value-format="yyyy-MM-dd"
:clearable="true"
type="date"
:append-to-body="false"
placeholder="请选择结束时间"
:picker-options="endTimePickerOptions"
></el-date-picker>
</el-form-item>
</div>
</template>
<script>
export default {
data() {
return {
inputForm: {
startTime: null,
endTime: null,
},
disabled: false, // 控制日期选择器是否禁用
};
},
computed: {
startTimePickerOptions() {
let that = this //改变作用域
return {
disabledDate(time) {
// 检查 inputForm 是否存在
if (!that.inputForm || !that.inputForm.endTime) {
return false; // 如果没有 inputForm 或没有选择结束时间，则不禁用任何日期
}
// 禁用结束时间开始时间之前的日期
return time.getTime() < new Date(that.inputForm.endTime).getTime();
},
};
},
endTimePickerOptions() {
let that = this //改变作用域
return {
disabledDate(time) {
// 检查 inputForm 是否存在
if (!this.inputForm || !this.inputForm.startTime) {
return false; // 如果没有 inputForm 或没有选择开始时间，则不禁用任何日期
}
// 禁用开始时间结束时间之后的日期
return time.getTime() < new Date(this.inputForm.startTime).getTime();
},
};
},
},
};
</script>