antd-vue时间选择范围TimePicker的使⽤,实现对应时间的禁⽤
  如题,需求:开始时间必须⼩于结束时间,结束时间必须⼤于开始时间,如果先选择了开始时间,则结束时间⾯板中⼩于开始时间的时、分、秒处于禁⽤状态,不可选择;如果先选择了结束时间,则开始时间⾯板中⼤于结束时间的时、分、秒处于禁⽤状态。解决⽅案如下:
HTML代码:
<a-time-picker v-model="form.startTime"
:disabledHours="disabledStartHours"
:disabledMinutes="disabledStar"
:disabledSeconds="disabledStartSeconds"
@change="onChangeStartTime"/>
<span >~</span>
<a-time-picker v-model="dTime"
:disabledHours="disabledEndHours"
:disabledMinutes="disabledEndMinutes"
:disabledSeconds="disabledEndSeconds"
@change="onChangeEndTime"/>
JS代码:
//获取不可选择的⼩时
disabledStartHours(){
if(dTime){
let hours = [];
let hour = moment(dTime).hour();
for (let i = hour+1; i < 24; i++) {
hours.push(i);
}
return hours
}
},
//获取不可选择的分钟
disabledStartMinutes(selectedHour){
if(dTime){
let minutes = [];
let hour = moment(dTime).hour();
let minute = moment(dTime).minute();
if(selectedHour===hour){
for (let i = minute+1; i < 60; i++) {
minutes.push(i);
}
}
return minutes
}
},
//获取不可选择的秒
disabledStartSeconds(selectedHour, selectedMinute){
if(dTime){
let seconds = [];
let hour = moment(dTime).hour();
let minute = moment(dTime).minute();
let second = moment(dTime).second();
if(selectedHour===hour&&selectedMinute ===minute){
for (let i = second+1; i < 60; i++) {
seconds.push(i);
}
}
return seconds
}
},
//获取不可选择的⼩时
disabledEndHours(){
if(this.form.startTime){
let hours = [];
let hour = moment(this.form.startTime).hour();
for (let i = 0; i < hour; i++) {
hours.push(i);
}
return hours
}
},
antdesignvue 配置外部文件//获取不可选择的分钟
disabledEndMinutes(selectedHour){
if(this.form.startTime){
let minutes = [];
let hour = moment(this.form.startTime).hour();
let minute = moment(this.form.startTime).minute();
if(selectedHour===hour){
for (let i = 0; i < minute; i++) {
minutes.push(i);
}
}
return minutes
}
},
//获取不可选择的秒
disabledEndSeconds(selectedHour, selectedMinute){ if(this.form.startTime){
let seconds = [];
let hour = moment(this.form.startTime).hour();
let minute = moment(this.form.startTime).minute();
let second = moment(this.form.startTime).second();
if(selectedHour===hour&&selectedMinute ===minute){
for (let i = 0; i < second; i++) {
seconds.push(i);
}
}
return seconds
}
},
实现效果如下: