el-date-picker根据开始时间或结束时间禁用前后时间

<template><div><el-form-item label="开始时间" prop="startTime"><el-date-pickerv-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-pickerv-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>