首先在<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
哦~
效果图如下,快来试试吧~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。