日期组件时间选择范围

1.限制选中的时间范围

点击时间选择器后，展示的时间如果不在规定的范围内将会被置灰

<el-date-picker
                v-model="time"
                :picker-options="pickerOptions"
                popper-class="range-class"
                type="datetimerange"
                range-separator="至"
                :editable="false"
                :clearable="false"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
                >
</el-date-picker>

其中 picker-options中的属性可以限制选择的区间

data() {
    return {
        pickerOptions: {
        // 设置时间日期选择器的禁用范围（是禁用范围 不是可选范围）
            disabledDate(time) {
                return time.getTime() < Date.now() - 8.64e7; //禁用今天之前的日期
                // 8.64e6 表示一天的时间（毫秒）
                return (
                    time.getTime() < new Date(ccc).getTime() ||
                    time.getTime() > nowData.getTime() - 1000
                );
                // 通过更改return 里的返回值即可调整选择范围
            }
        },
    }

2.动态设置选择范围（如：选择时间范围不超过1个月）

日期选择器的可选范围为动态控制时，需要增加一个onPick 来动态控制disabledData的禁用状态

data() {
    return {
        pickerMinDate:'',
        pickerOptions: {
            // 当选中某一个时间时执行该方法
            onPick: ({ maxDate, minDate }) => {
                // 获取点击的时间信息并进行记录
                this.pickerMinDate = minDate.getTime();
                // 如果选择完最大时间 将记录擦除
                if (maxDate) {
                    this.pickerMinDate = '';
                }
            },
            disabledDate(time) {
                return time.getTime() < Date.now() - 8.64e7; //禁用今天之前的日期
                // 8.64e6 表示一天的时间（毫秒）
                if(this.pickerMinDate){
                    return (
                        time.getTime() > new Date().getTime() || 
                        this.getTime() < this.pickerMinDate 
                    );
                    // 动态禁用：禁用今天之后的时间和选中点前的时间
                }else{
                    return time.getTime() > new Date().getTime()
                }

                // 禁用
            }

        },
    }

3..增设快捷日期

利用shortcuts设置快捷选项 如：选中7天、选中1个月 等

data() {
    return {
        pickerOptions: {
            // 设置时间日期选择器的快捷按钮
            shortcuts: [{
                text: '最近一周',
                onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                }
            }]
        },
    }