element-ui 时间选择器限制范围的实现

Element UI 时间选择器是一个非常常用的组件，但是在一些场景下我们需要对其进行限制范围，比如只能选择当前时间之后的时间，或者只能选择今天之前的日期。在本文中，我们将探讨如何用 Element UI 实现时间选择器的限制范围。

Element UI 时间选择器有两个子组件：DatePicker 和 TimePicker。它们都有一个叫做picker-options的属性，可以用于设置时间选择器的一些限制条件。

首先我们来看DatePicker的限制。比如，我们想要让DatePicker只能选择今天之前的日期，可以这样写：

<el-date-picker
  v-model="date"
  :picker-options="{
    disabledDate(date) {
      return date.getTime() > Date.now();
    }
  }"
></el-date-picker>

上面代码中，我们通过设置picker-options的属性来限制DatePicker只能选择今天之前的日期。picker-options是一个对象，其中disabledDate属性用于设置禁用某些日期的方法。这个方法接收一个日期对象，返回值为true表示这个日期不可用，false表示可用。我们只需要在这个方法中判断选择的日期是否大于今天即可。

类似地，我们也可以对TimePicker进行限制。比如，我们想要让TimePicker只能选择从当前时间开始，可以这样写：

<el-time-picker
  v-model="time"
  :picker-options="{
    disabledHours() {
      return Array.from({ length: 24 }, (_, i) => i).filter(i => i < new Date().getHours());
    },
    disabledMinutes(hour) {
      if (hour < new Date().getHours()) {
        return [];
      } else if (hour === new Date().getHours()) {
        return Array.from({ length: new Date().getMinutes() }, (_, i) => i).map(i => i + 1);
      } else {
        return [];
      }
    },
    disabledSeconds(hour, minute) {
      if (hour < new Date().getHours() || (hour === new Date().getHours() && minute < new Date().getMinutes())) {
        return [];
      } else {
        return Array.from({ length: new Date().getSeconds() }, (_, i) => i).map(i => i + 1);
      }
    }
  }"
></el-time-picker>

上面代码中，我们通过设置picker-options的属性来限制TimePicker只能选择从当前时间开始。picker-options是一个对象，其中disabledHours、disabledMinutes和disabledSeconds属性用于设置禁用某些小时、分钟、秒的方法。这些方法都接收一到两个参数，返回值为一个数组，表示禁用的小时、分钟、秒。我们需要根据当前时间判断禁用哪些时间，这里涉及到一些复杂的逻辑，需要仔细思考。

总体来说，Element UI 时间选择器的限制范围功能非常强大，可以满足各种场景下的需求。我们只需要熟练掌握其API，就能轻松实现限制范围的功能。