View Design TimePicker 限制时间范围

最新推荐文章于 2025-12-10 11:05:52 发布

原创最新推荐文章于 2025-12-10 11:05:52 发布 · 103 阅读

CC 4.0 BY-SA版权

文章标签：

<TimePicker
:disabled-hours="[1,5,10]"
 :disabled-minutes="[0,10,20]"
 placeholder="Select time"
 style="width: 168px" />

由于TimePicker 的限制disabled-hours disabled-minutes disabled-seconds 组合禁止用户选择某个时间，需要传入数组

<TimePicker format="HH:mm" placeholder="开始时间" v-model="xzInfo.val1" style="width: 200px;margin-right: 15px;"
:disabled-hours="disabledhoursStar"
 :disabled-minutes="disabledminutesStar"
 @on-change="changeStar"
 />
 <TimePicker format="HH:mm" placeholder="结束时间" v-model="xzInfo.val2" style="width: 200px"
 :disabled-hours="disabledhoursEnd"
 :disabled-minutes="disabledminutesEnd"
 @on-change="changeEnd"
 />
 disabledhoursStar: [],
 disabledminutesStar: [],
 disabledhoursEnd: [],
 disabledminutesEnd: []

默认空数组，根据change 时间改变来更改限制条件

//获取不可选择的小时
disabledStartHours(endTime){
  if(endTime){
      let hours = [];
      // let hour = moment(endTime).hour();
      let hour = endTime.split(':')[0];
      for (let i = Number(hour)+1; i < 24; i++) {
          hours.push(i);
      }
      return hours
  }
},
//获取不可选择的分钟
disabledStartMinutes(endTime,selectedHour){
  if(endTime){
      let minutes = [];
      // let hour = moment(endTime).hour();
      let hour = endTime.split(':')[0];
      // let minute = moment(endTime).minute();
      let minute = endTime.split(':')[1];
      if(selectedHour===hour){
          for (let i = Number(minute)+1; i < 60; i++) {
              minutes.push(i);
          }
      }
      return minutes
  }
},
//获取不可选择的小时
disabledEndHours(startTime){
  if(startTime){
      let hours = [];
      // let hour = moment(startTime).hour();
      let hour = startTime.split(':')[0];
      for (let i = 0; i < hour; i++) {
          hours.push(i);
      }
      return hours
  }
},
//获取不可选择的分钟
disabledEndMinutes(startTime,selectedHour){
  if(startTime){
      let minutes = [];
      // let hour = moment(startTime).hour();
      let hour = startTime.split(':')[0];
      // let minute = moment(startTime).minute();
      let minute = startTime.split(':')[1];
      if(selectedHour===hour){
          for (let i = 0; i < minute; i++) {
              minutes.push(i);
          }
      }
      return minutes
  }
},
changeStar(e) {
  this.$nextTick(() => {
      this.disabledhoursEnd = this.disabledEndHours(this.xzInfo.val1)
      this.disabledminutesStar = this.disabledStartMinutes(this.xzInfo.val2, e.split(':')[0])
  })
},
changeEnd(e) {
  this.$nextTick(() => {
      this.disabledhoursStar = this.disabledStartHours(this.xzInfo.val2)
      this.disabledminutesEnd = this.disabledEndMinutes(this.xzInfo.val1, e.split(':')[0])
  })
},