Ant-design-vue|Ant-design-vue DatePicker 日期选择框时间选择范围限定
方法一：预选前处理
（1）disableDate禁选日期
原理：当点击展开时间选择器，会默认遍历选择器中显示的所以日期，通过date返回，我们可以return（true/false）来判断是否可选
disableDate（date）{
return date（2）disabledTime禁选时间
【Ant-design-vue|Ant-design-vue DatePicker 日期选择框时间选择范围限定】原理：由于禁选时间分为时、分、秒，所以需要各自返回禁选数组，time为当前选择时间
disabledEndTime（time）{
let result
let startValue = https://www.it610.com/article/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 = https://www.it610.com/article/null
vue.$message.warning("结束时间不能小于开始时间")
}
}
}
}推荐阅读
- 0811～2017下个旅程~利川
- 修行之谜
- 20190328
- Python|Python 基于datetime库的日期时间数据处理
- 重走长征路第489天
- Unix时间戳与日期格式的相互转化
- 考霸训练营正式课5
- 2018/8/15嘟小妞儿研学第五天
- 1.前端引入jeDate日期控件
- Angular|Angular 日期管道 datePipe - dateFormat