如題,需求:開始時間必須小於結束時間,結束時間必須大於開始時間,如果先選擇了開始時間,則結束時間面板中小於開始時間的時、分、秒處於禁用狀態,不可選擇;如果先選擇了結束時間,則開始時間面板中大於結束時間的時、分、秒處於禁用狀態。解決方案如下:
HTML代碼:
<a-time-picker v-model="form.startTime" style="width: 110px;margin-left: 5px" :disabledHours="disabledStartHours" :disabledMinutes="disabledStar" :disabledSeconds="disabledStartSeconds" @change="onChangeStartTime" /> <span style="margin: 0 5px">~</span> <a-time-picker v-model="form.endTime" style="width: 110px;" :disabledHours="disabledEndHours" :disabledMinutes="disabledEndMinutes" :disabledSeconds="disabledEndSeconds" @change="onChangeEndTime" />
JS代碼:
//獲取不可選擇的小時 disabledStartHours(){ if(this.form.endTime){ let hours = []; let hour = moment(this.form.endTime).hour(); for (let i = hour+1; i < 24; i++) { hours.push(i); } return hours } }, //獲取不可選擇的分鍾 disabledStartMinutes(selectedHour){ if(this.form.endTime){ let minutes = []; let hour = moment(this.form.endTime).hour(); let minute = moment(this.form.endTime).minute(); if(selectedHour===hour){ for (let i = minute+1; i < 60; i++) { minutes.push(i); } } return minutes } }, //獲取不可選擇的秒 disabledStartSeconds(selectedHour, selectedMinute){ if(this.form.endTime){ let seconds = []; let hour = moment(this.form.endTime).hour(); let minute = moment(this.form.endTime).minute(); let second = moment(this.form.endTime).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 } }, //獲取不可選擇的分鍾 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 } },
實現效果如下:



