Ant Design Vue 中竟然沒有時(shí)間范圍的選擇器組件角撞，有日期范圍的哲鸳，搞不懂為什么沒有時(shí)間的摹量，自己水平太有限了涤伐，自己寫這個(gè)邏輯簡直就是要命，就因?yàn)檫@個(gè)我是兩天都沒有休息好缨称，就為了寫好這個(gè)時(shí)間選擇器凝果。。睦尽。

時(shí)間選擇器.png

就這種樣式的選擇實(shí)現(xiàn)的是24小時(shí)制的器净，實(shí)現(xiàn)起來真的不簡單呀~
1.這個(gè)布局是十分簡單的

<div style="display:flex">
    <a-form-model-item prop="start_time">
      <a-time-picker
        placeholder="開始時(shí)間"
        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="結(jié)束時(shí)間"
        format="HH:mm"
        v-model="form.end_time"
        :disabledHours="disabledEndHours"
        :disabledMinutes="disabledEndMin"
      />
    </a-form-model-item>
</div>

2.時(shí)間選擇，關(guān)于時(shí)間的禁用

/* ===== 獲得禁用的數(shù)組值 ===== */
    getDisabledArr(start, end) {
      //srart=禁用的開始值当凡，end=禁用的結(jié)束值
      let arr = [];
      for (let i = start; i <= end; i++) {
        arr.push(i);
      }
      return arr;
    },
    /* ===== 先選擇結(jié)束時(shí)山害，開始禁用判斷 ===== */
    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;
      }
    },
    /* ===== 先選擇開始，結(jié)束禁用判斷 ===== */
    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;
      }
    }

關(guān)于時(shí)間禁用有三個(gè)比較難處理的點(diǎn)：

• 開始時(shí)間選擇23:59沿量，這個(gè)時(shí)候是禁用結(jié)束時(shí)間的所有選擇的
  結(jié)束時(shí)間禁用.png

• 結(jié)束時(shí)間選擇00:00浪慌，這個(gè)時(shí)候是要求禁用開始時(shí)間的
  開始時(shí)間的禁用.png

• 當(dāng)前本機(jī)時(shí)間會默認(rèn)選上，無法禁用（這個(gè)個(gè)問題我現(xiàn)在還沒有解決朴则，就使用了moment中的isBefore权纤，直接放到驗(yàn)證中，不讓其驗(yàn)證通過）
  本機(jī)時(shí)間的驗(yàn)證.png