elementui时间组件，选择禁选的日期，如何触发“确认”按钮？

Question

DateTimePicker组件，type="datetimerange",需要分别限制开始时间、结束时间的可选范围，假设：开始时间选择范围是：1——7号，结束时间范围是：20号以后，那么，当开始选中4号，结束选中21号是，当前的状态是，20号之前的日期都会被禁用，但是因为选择开始时间是，4号是可选的，这种i情况下就选中了一个禁选的日期，但是组件的确认按钮是 disabled 的，该如何让该按钮可点击呢？

Answer 1

1. 这样的需求本就不该直接使用datetimerange， 而是拆分两个独立的开始时间，和结束时间， 结束时间根据开始时间的选择而做动态的处理。
2. 再不然就是自己写一个确定按钮，隐藏组件的内容。

Answer 2

1.动态更新结束日期的可选范围： 当用户选择了开始日期后，动态更新结束日期的可选范围。例如，如果用户选择了4号作为开始日期，那么结束日期的可选范围应该从4号之后开始。
2.验证日期范围： 在用户选择日期时，实时验证所选的日期范围是否有效。如果开始日期和结束日期都在允许的范围内，则启用确认按钮。
3.监听日期选择事件： 在日期选择组件中，监听开始日期和结束日期的选择事件，并根据选择的日期更新确认按钮的状态。

示例代码

<template>
  <el-date-picker
    v-model="dateRange"
    type="datetimerange"
    :picker-options="pickerOptions"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    @change="handleDateChange"
  />
  <el-button :disabled="isConfirmDisabled" @click="confirm">确认</el-button>
</template>

<script>
export default {
  data() {
    return {
      dateRange: [],
      isConfirmDisabled: true,
      pickerOptions: {
        disabledDate(time) {
          const start = new Date(time).setHours(0, 0, 0, 0);
          const end = new Date(time).setHours(23, 59, 59, 999);
          const startDate = new Date().setDate(1);
          const endDate = new Date().setDate(7);
          const minEndDate = new Date().setDate(20);
          return (start < startDate || start > endDate) && (start < minEndDate);
        }
      }
    };
  },
  methods: {
    handleDateChange() {
      const [start, end] = this.dateRange;
      if (start && end) {
        const startDate = new Date(start).setHours(0, 0, 0, 0);
        const endDate = new Date(end).setHours(23, 59, 59, 999);
        const minEndDate = new Date().setDate(20);
        this.isConfirmDisabled = startDate > endDate || endDate < minEndDate;
      } else {
        this.isConfirmDisabled = true;
      }
    },
    confirm() {
      // 确认按钮的逻辑
    }
  }
};
</script>