关于ant design vue2版本的时间选择器

今天在使用ant design 的时候用了它的时间选择器，想做到类似于日期选择器的效果=>选择开始时间的时候结束时间不能小于开始时间，选择结束时间的时候开始时间不能大于结束时间。

 但是找了找了ant design vue2官网的时间选择器发现，它并没有类似于日期选择器的效果，欲哭无泪，只能自己写一个效果类似的；

ant design官网中，时间选择器下有 几个禁用时间的API ，想实现上述的需求，就要从这儿下手disabledHours：禁用小时；disabledMinutes：禁用分钟；disabledSeconds：禁用秒。

这三个API接受的都是列表。列表内是什么就禁用什么。

直接上代码

<a-time-picker
                :use12-hours="false"
                v-model="queryParam.startTime"
                format="HH:mm"
                @change="onChangeStartTime"
                :disabledHours="StartHours"
                :disabledMinutes="StarMinutes"
                style="flex: 50%"
                placeholder="开始"
              />
              <a-time-picker
                v-model="queryParam.endTime"
                :use12-hours="false"
                format="HH:mm"
                :disabledHours="EndHours"
                :disabledMinutes="EndMinutes"
                @change="onChangeEndTime"
                style="flex: 50%; margin-left: 10px"
                placeholder="结束"
              />

//开始时间
StartHours() {
      let hours = []
      for (let i = 0; i < 12; i++) {
        hours.push(i)
      }
      for (let i = 15; i < 24; i++) {
        hours.push(i)
      }
      if (this.queryParam.endTime) {
        let hour = moment(this.queryParam.endTime).hour()
        for (let i = hour + 1; i < 24; i++) {
          hours.push(i)
        }
        return hours
      }
      return hours
    },
    StarMinutes(selectHour) {
      if (this.queryParam.endTime) {
        let minutes = []
        let hour = moment(this.queryParam.endTime).hour()
        let minute = moment(this.queryParam.endTime).minute()
        if (selectHour === hour) {
          for (let i = minute + 1; i < 60; i++) {
            minutes.push(i)
          }
        }
        return minutes
      }
    },
//结束时间
    disabledEndHours() {
      let hours = []
      for (let i = 0; i < 12; i++) {
        hours.push(i)
      }
      for (let i = 15; i < 24; i++) {
        hours.push(i)
      }
      if (this.queryParam.startTime) {
        let hour = moment(this.queryParam.startTime).hour()
        for (let i = 0; i < hour; i++) {
          hours.push(i)
        }
        return hours
      }
      return hours
    },
    disabledEndMinutes(selectHour) {
      if (this.queryParam.startTime) {
        let minutes = []
        let hour = moment(this.queryParam.startTime).hour()
        let minute = moment(this.queryParam.startTime).minute()
        if (selectHour === hour) {
          for (let i = 0; i < minute + 1; i++) {
            minutes.push(i)
          }
        }
        return minutes
      }
    },

需要注意的是，ant design的时间选择框的时间格式是moment,不是String类型

由于我需要在一开始就给开始和结束时间一个范围，所以会在前两个for循环内主动的去禁用一些时间。

然后queryParam是个对象，里边对应的就是时间选择器修改的后的内容。

最后实现的效果是这样的

 

当选择开始时间结束时间不能小于开始时间 

 

当选择结束时间是，开始时间不能小于结束时间

 ok！收工睡觉！