a-time-picker时间日期选择器时间范围控制开始时间大于开始时间

最新推荐文章于 2025-02-28 15:53:16 发布

原创最新推荐文章于 2025-02-28 15:53:16 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #linq #javascript

本文详细介绍了如何使用HTML和JavaScript实现日期时间选择器的受限选择功能，通过`a-time-picker`组件展示，展示了如何根据结束时间动态设置开始时间范围，涉及`disabledHours`、`disabledMinutes`和`disabledSeconds`的计算逻辑。

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
}
},