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

风吹头皮凉2025-01-20 8:15
javascript 复制代码
<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>