Ant Design of Vue日期选择框a-date-picker

Ant Design of Vue日期选择框a-date-picker

问题：需要提供两个日期选择框，一个“开始时间”一个“结束时间”，且应该有限制

两种情况限制

1. 开始时间应早于结束时间
2. 开始时间与结束时间的间隔不能太大，太大会影响请求接口的速度，应适当给出合理的范围

利用组件a-date-picker属性disabled-date解决：

disabledDateStart：

• 调用时间：在先选择了结束时间时，点击开始时间日期选择框，检查disabledDateStart
• 作用：提供结束时间选择范围

disabledDateEnd：

• 调用时间：在先选择了开始时间时，点击结束时间日期选择框，检查disabledDateEnd
• 作用：提供开始时间选择范围

timeStart：用来记录选择的开始时间

timeEnd：用来记录选择的结束时间

onChangeStart：

• 调用时间：选择开始时间后调用
• 作用：把在开始日期选择框选择的时间赋值给timeStart

onChangeEnd：

• 调用时间：选择结束时间后调用
• 作用：把在结束日期选择框选择的时间赋值给timeEnd

onChangeStart(time) {
    this.timeStart = time
    console.log('开始时间'+time)	
},
onChangeEnd(time) {
    this.timeEnd = time
    console.log('结束时间'+time)
},
disabledDateStart(current) {
    if(this.timeStart==null&&this.timeEnd==null){
        return;
    }
    //此处的if语句是用来保证在每次选择日期时没有限制
    return current >= moment(this.timeEnd).endOf('day') || current <= moment(this.timeEnd).add(-1, 'months');
    //此时已选择结束时间，限制分为两部分，前一部分是限制开始时间应早于已确定的结束时间，后一部分是限制开始时间与结束时间之间的间隔不应超过一个月
},
disabledDateEnd(current) {
    if(this.timeStart==null&&this.timeEnd==null){
        return;
    }
    return current <= moment(this.timeStart).endOf('day') || current >= moment(this.timeStart).add(1, 'months');
    },

效果：

1. 选择开始时间后，选择结束时间

2. 选择结束时间后，选择开始时间