1、html:

 <a-row>
              <a-col :span="24" class="configRow">休息时间维护: 中午:<a-time-picker  v-model="amRestStartTime" @change="(val,dateStrings)=>changeTime(val,dateStrings,'startTime')" format="HH:mm:ss"/><span> ---- </span><a-time-picker :disabledHours="getDisabledHours" :disabledMinutes="getDisabledMinutes" :disabledSeconds="getDisabledSeconds" format="HH:mm:ss" v-model="amRestEndTime" @change="(val,dateStrings)=>changeTime(val,dateStrings,'endTime')" /> 晚间:<a-time-picker format="HH:mm:ss" v-model="pmRestStartTime" @change="onPmStartChangeYj" /><span> ---- </span><a-time-picker format="HH:mm:ss" v-model="pmRestEndTime" @change="onPmEndChangeYj" /> </a-col>
            </a-row>

2.ts

    changeTime(val: any, dateStrings: any, type: string) {
      if (type === 'startTime') {
        this.amRestStart = dateStrings
      } else {
        this.amRestEnd = dateStrings
      }
    }

    getDisabledHours() {
      const hours = []
      const time = this.amRestStart
      const timeArr = time.split(':')
      for (var i = 0; i < parseInt(timeArr[0]); i++) {
        hours.push(i)
      }
      return hours
    }

    getDisabledMinutes(selectedHour: number) {
      const time = this.amRestStart
      const timeArr = time.split(':')
      const minutes = []
      if (selectedHour === parseInt(timeArr[0])) {
        for (var i = 0; i < parseInt(timeArr[1]); i++) {
          minutes.push(i)
        }
      }
      return minutes
    }

    getDisabledSeconds(selectedHour: number, selectedMinute: number) {
      const time = this.amRestStart
      const timeArr = time.split(':')
      const second = []
      if (selectedHour === parseInt(timeArr[0]) && selectedMinute === parseInt(timeArr[1])) {
        for (var i = 0; i <= parseInt(timeArr[2]); i++) {
          second.push(i)
        }
      }
      return second
    }

时分秒传值注意事项:

需要分配两个值 1、v-model接收组件的值 2、自定义一个值 获取时分秒 即change函数里面的时分秒往后台传值

接收时 把组件的值用来接收给v-model 否则 报 Invliate date

Logo

前往低代码交流专区

更多推荐