今天在使用ant design 的时候用了它的时间选择器,想做到类似于日期选择器的效果=>选择开始时间的时候结束时间不能小于开始时间,选择结束时间的时候开始时间不能大于结束时间。
但是找了找了ant design vue2官网的时间选择器发现,它并没有类似于日期选择器的效果,欲哭无泪,只能自己写一个效果类似的;
ant design官网中,时间选择器下有 几个禁用时间的API ,想实现上述的需求,就要从这儿下手disabledHours:禁用小时;disabledMinutes:禁用分钟;disabledSeconds:禁用秒。
这三个API接受的都是列表。列表内是什么就禁用什么。
直接上代码
<a-time-picker
:use12-hours="false"
v-model="queryParam.startTime"
format="HH:mm"
@change="onChangeStartTime"
:disabledHours="StartHours"
:disabledMinutes="StarMinutes"
style="flex: 50%"
placeholder="开始"
/>
<a-time-picker
v-model="queryParam.endTime"
:use12-hours="false"
format="HH:mm"
:disabledHours="EndHours"
:disabledMinutes="EndMinutes"
@change="onChangeEndTime"
style="flex: 50%; margin-left: 10px"
placeholder="结束"
/>
//开始时间
StartHours() {
let hours = []
for (let i = 0; i < 12; i++) {
hours.push(i)
}
for (let i = 15; i < 24; i++) {
hours.push(i)
}
if (this.queryParam.endTime) {
let hour = moment(this.queryParam.endTime).hour()
for (let i = hour + 1; i < 24; i++) {
hours.push(i)
}
return hours
}
return hours
},
StarMinutes(selectHour) {
if (this.queryParam.endTime) {
let minutes = []
let hour = moment(this.queryParam.endTime).hour()
let minute = moment(this.queryParam.endTime).minute()
if (selectHour === hour) {
for (let i = minute + 1; i < 60; i++) {
minutes.push(i)
}
}
return minutes
}
},
//结束时间
disabledEndHours() {
let hours = []
for (let i = 0; i < 12; i++) {
hours.push(i)
}
for (let i = 15; i < 24; i++) {
hours.push(i)
}
if (this.queryParam.startTime) {
let hour = moment(this.queryParam.startTime).hour()
for (let i = 0; i < hour; i++) {
hours.push(i)
}
return hours
}
return hours
},
disabledEndMinutes(selectHour) {
if (this.queryParam.startTime) {
let minutes = []
let hour = moment(this.queryParam.startTime).hour()
let minute = moment(this.queryParam.startTime).minute()
if (selectHour === hour) {
for (let i = 0; i < minute + 1; i++) {
minutes.push(i)
}
}
return minutes
}
},
需要注意的是,ant design的时间选择框的时间格式是moment,不是String类型
由于我需要在一开始就给开始和结束时间一个范围,所以会在前两个for循环内主动的去禁用一些时间。
然后queryParam是个对象,里边对应的就是时间选择器修改的后的内容。
最后实现的效果是这样的
当选择开始时间结束时间不能小于开始时间
当选择结束时间是,开始时间不能小于结束时间
ok!收工睡觉!