业务需求： 当选择完一个开始日期,截止结束日期不得大于x天

下图示例为限制范围为7天内

源码

<template>
    <div>
        <a-range-picker :disabled-date="disabledDate" v-model="priceRangeDate" @calendarChange="calendarPriceRangeChange" @change="changePriceRangeDate" />
    </div>
</template>
<script>
    import moment from 'moment';
    export default {
        data() {
            return {
                priceRangeDate: [],
                selectPriceDate: '',
                offsetDays: 86400000 * 7 //最多选择7天
            }
        },
        methods:{
            moment,
            //选择完时间 清空限制
            changePriceRangeDate() {
                this.selectPriceDate = ''
            },
            //选择开始时间/结束时间
            calendarPriceRangeChange(date){
                this.selectPriceDate = date[0]
            },
            //根据选择的开始时间/结束时间，动态渲染要禁用的日期
            disabledDate(current){
                if(this.selectPriceDate){
                    let selectV = moment(this.selectPriceDate, 'YYYY-MM-DD').valueOf()
                    return current > moment(new Date(selectV+this.offsetDays), 'YYYY-MM-DD') ||
                        current < moment(new Date(selectV-this.offsetDays), 'YYYY-MM-DD')
                }else{
                    return false
                }
            }
        }
    };
</script>