关于vue.js:Antdesignvue-DatePicker-日期选择框时间选择范围限定

61次阅读

共计 953 个字符,预计需要花费 3 分钟才能阅读完成。

办法一:预选前解决

(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("完结工夫不能小于开始工夫")
}
}
}
}

正文完
 0