element - DatePicker日期选择器：选择开始日期后，设置前后可选日期跨度

需求

日期选择：打开日期选择器，最大范围是当前日期的前后30天，点击起始时间后，可选范围改为选择日期的前后7天。

实现

html部分

<el-date-picker 
    v-model="datePicker" 
    type="daterange" 
    range-separator="至" 
    start-placeholder="开始日期" 
    end-placeholder="结束日期"
    :picker-options="pickerOptions"
    @change="changeDatePicker"
> 
</el-date-picker>

vue部分

data() {
    return {
        // 日期选择
        datePicker: '',
        // 配置项
        pickerOptions: {
            // 点击的起始时间
            firstSelectDate: null,
            // 设置不可选的日期
            disabledDate: time => {
                // 获取当前日期
                const nowDate = new Date()
                // 设置范围, N-30到N+30
                const nowMinDate = new Date(nowDate)
                nowMinDate.setDate(nowMinDate.getDate() - 30)
                const nowMaxDate = new Date(nowDate)
                nowMaxDate.setDate(nowMaxDate.getDate() + 30)
                
                // 返回时间范围
                if (this.pickerOptions.firstSelectDate === null || this.pickerOptions.firstSelectDate === undefined) {
                    // 没有选择起始日期，返回范围 前后30天
                    return time < nowMinDate || time > nowMaxDate
                } else {
                    // 选择了起始日期，返回范围 前后7天
                    const minDate = new Date(this.pickerOptions.firstSelectDate)
                    minDate.setDate(minDate.getDate() - 7)
                    const maxDate = new Date(this.pickerOptions.firstSelectDate)
                    maxDate.setDate(maxDate.getDate() + 7)
                    // 前后7天的小范围，要在前后30天的大范围里，不能超出
                    // 例如：选择30天中最后一天，后面的7天任然是不可选的
                    return (time < nowMinDate || time > nowMaxDate) || (time < minDate || time > maxDate)
                }
            }
        },
        onPick: dateRange => {
            // 获取点击的起始日期
            this.pickerOptions.firstSelectDate = dateRange.minDate
            // 获取到结束日期后，恢复日期跨度为30
            if (dateRange.maxDate) {
                this.pickerOptions.firstSelectDate = null
            }
        }
    }
}

🎉感谢阅读🎉