Ant Design Vue 中竟然没有时间范围的选择器组件，有日期范围的，搞不懂为什么没有时间的，自己水平太有限了，自己写这个逻辑简直就是要命，就因为这个我是两天都没有休息好，就为了写好这个时间选择器。。。

时间选择器.png

就这种样式的选择实现的是24小时制的，实现起来真的不简单呀~
1.这个布局是十分简单的

<div style="display:flex">
    <a-form-model-item prop="start_time">
      <a-time-picker
        placeholder="开始时间"
        format="HH:mm"
        v-model="form.start_time"
        :disabledHours="disabledStartHours"
        :disabledMinutes="disabledStartMin"
      />
    </a-form-model-item>
    <a-divider class="divider" />
    <a-form-model-item prop="end_time">
      <a-time-picker
        placeholder="结束时间"
        format="HH:mm"
        v-model="form.end_time"
        :disabledHours="disabledEndHours"
        :disabledMinutes="disabledEndMin"
      />
    </a-form-model-item>
</div>

2.时间选择，关于时间的禁用

/* ===== 获得禁用的数组值 ===== */
    getDisabledArr(start, end) {
      //srart=禁用的开始值，end=禁用的结束值
      let arr = [];
      for (let i = start; i <= end; i++) {
        arr.push(i);
      }
      return arr;
    },
    /* ===== 先选择结束时，开始禁用判断 ===== */
    disabledStartHours() {
      if (!this.form.end_time) {
        return false;
      }
      const endtime = moment(this.form.end_time).toObject();
      return this.getDisabledArr(
        endtime.minutes == 0 ? endtime.hours : endtime.hours + 1,
        24
      );
    },
    disabledStartMin(selectedHour) {
      if (!this.form.end_time) {
        return false;
      }
      const endtime = moment(this.form.end_time).toObject();
      if (selectedHour == endtime.hours) {
        return this.getDisabledArr(endtime.minutes, 59);
      } else if (selectedHour > endtime.hours) {
        return this.getDisabledArr(0, 59);
      } else {
        return false;
      }
    },
    /* ===== 先选择开始，结束禁用判断 ===== */
    disabledEndHours() {
      if (!this.form.start_time) {
        return false;
      }
      const starttime = moment(this.form.start_time).toObject();
      return this.getDisabledArr(
        0,
        starttime.minutes == 59 ? starttime.hours : starttime.hours - 1
      );
    },
    disabledEndMin(selectedHour) {
      if (!this.form.start_time) {
        return false;
      }
      const starttime = moment(this.form.start_time).toObject();
      if (selectedHour == starttime.hours) {
        return this.getDisabledArr(0, starttime.minutes);
      } else if (
        selectedHour < starttime.hours ||
        (starttime.hours == 23 && starttime.minutes == 59)
      ) {
        return this.getDisabledArr(0, 59);
      } else {
        return false;
      }
    }

关于时间禁用有三个比较难处理的点：

• 开始时间选择23:59，这个时候是禁用结束时间的所有选择的
  结束时间禁用.png

• 结束时间选择00:00，这个时候是要求禁用开始时间的
  开始时间的禁用.png

• 当前本机时间会默认选上，无法禁用（这个个问题我现在还没有解决，就使用了moment中的isBefore，直接放到验证中，不让其验证通过）
  本机时间的验证.png