Ant-design-vue DatePicker 日期选择框时间选择范围限定

方法一：预选前处理

（1）disableDate禁选日期

原理：当点击展开时间选择器，会默认遍历选择器中显示的所有日期，通过date返回，我们可以return（true/false）来判断是否可选

disableDate（date）{
return date<this.$moment(this.$moment(new Date()).format("YYYY-MM-DD")); //返回今天以后的日期
}

（2）disabledTime禁选时间

原理：由于禁选时间分为时、分、秒，所以需要各自返回禁选数组，time为当前选择时间

disabledEndTime（time）{
let result
let startValue = this.form.getFieldValue（‘startTime’）

function returnarray（max）{
var tem = [];
for (var i = 0; i < max; i++){
tem.push(i)
}
return tem
}

if(startValue){
let hours = this.$moment(startValue).format("HH");
let minutes = this.$moment(startValue).format('mm')
result = {
disabledHours:() => returnarray(hours)
}
//若选中时间后，动态返回可选时间(处理与开始时间同一时的情况)
if(time){
let hourschosen = this.$moment(time._d).format("HH")
if(hourschosen === hours){
result = {
disabledHours:() => returnarray(hours)
disabledMinutes:() => returnarray(parseInt(minutes, 0) + 1)
}
} 
}
return result;
}
}

方法二：选中后判断

watch:{
endValue(val){
if(this.startValue && val) {
if(this.startValue > val){
let vue = new Vue()
this.endValue = null
vue.$message.warning("结束时间不能小于开始时间")
}
}
}
}