a-time-picker时间范围限制

忘れられたくない

首先在<template>写入

<a-form-item label="时间段2" >
     <a-time-picker format="HH:mm" style="width:50%" 
        :disabledHours="disabledHourTroughTimeTwoStart"
        :disabledMinutes="disabledMinutesTroughTimeTwoStart"
        :defaultValue="moment(troughTimeTwoStart, 'HH:mm')"
        @change="(val,dateStrings)=>changeTime(val,dateStrings,'troughTimeTwoStart')"
        />
    <a-time-picker format="HH:mm" style="width:50%" 
        :disabledHours="disabledHourTroughTimeTwoEnd"
        :disabledMinutes="disabledMinutesTroughTimeTwoEnd"
        :defaultValue="moment(troughTimeTwoEnd, 'HH:mm')"
        @change="(val,dateStrings)=>changeTime(val,dateStrings,'troughTimeTwoEnd')"
        />

</a-form-item>

data初始化数据

troughTimeTwoStart:'00:00',
troughTimeTwoEnd:'10:00',

methods方法

//判断哪个数值发生改变并且赋值
changeTime (val, dateStrings, type) {
  if(type === 'troughTimeTwoStart'){
      this.troughTimeOneStart=dateStrings
  }
  if(type==='troughTimeTwoEnd'){
      this.troughTimeOneEnd=dateStrings
  }
//限制开始时间的小时
disabledHourTroughTimeTwoStart(){
        let hours = []
        let time = this.troughTimeTwoEnd
        let timeArr = time.split(':')
        let timeHour= parseInt(timeArr[1])>0 ? parseInt(timeArr[0])+1 : parseInt(timeArr[0])
        for (var i = timeHour; i <24; i++) {
            hours.push(i)
        }    
        return hours   
    },
    //限制开始时间的分钟
    disabledMinutesTroughTimeTwoStart(selectedHour) {
      let time = this.troughTimeTwoEnd
      let timeArr = time.split(':')
      let minutes = []
      if (selectedHour == parseInt(timeArr[0])) {
        for(var i = parseInt(timeArr[1]); i < 60; i++) {
          minutes.push(i)
        }
      }
      return minutes
    },
//限制结束时间的小时
disabledHourTroughTimeTwoEnd(){
        let hours = []
        let time = this.troughTimeTwoStart
        let timeArr = time.split(':')
        let timeHour= parseInt(timeArr[1])<59 ? parseInt(timeArr[0]) : parseInt(timeArr[0])+1
        for (var i = 0; i <timeHour; i++) {
            hours.push(i)
        }    
        return hours   
    },
    //限制结束时间的分钟
    disabledMinutesTroughTimeTwoEnd(selectedHour) {
      let time = this.troughTimeTwoStart
      let timeArr = time.split(':')
      let minutes = []
      if (selectedHour == parseInt(timeArr[0])) {
        for(var i = 0; i <= parseInt(timeArr[1]); i++) {
          minutes.push(i)
        }
      }
      return minutes
    },

最后数据初始化默认值的时候一定不要忘记在方法中引入moment哦~
效果图如下,快来试试吧~
time.png

阅读 402
11 声望
3 粉丝
0 条评论
11 声望
3 粉丝
宣传栏