Element 禁止选择当前时间以后的天数，并限制查询天数

1. 添加选择限制 pickerOptions

代码语言：javascript复制

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

2. 在data里定义pickerOptions

代码语言：javascript复制

pickerOptions: {
    // 选择日期时
    onPick: ({ maxDate, minDate }) => {
        // 将开始时间置为选择时间
        this.choiceDate = minDate.getTime();
        // 当选择了结束时间
        if(maxDate){
            // 清除选择时间
            this.choiceDate="";
        };
    },
    disabledDate: time => {
        let self = this;
        // 如果有选择时间，即选择了开始时间后
        if (self.choiceDate) {
            // 开始时间
            let startDay =self.choiceDate;
            // 限制结束时间只能是未来31天
            let endDay = startDay   24 *3600 *1000 *31;
            // 如果未来31天超过了今天
            if(endDay > (Date.now() - 8.64e6)){
                // 将结束时间置为今天,如果不想包含今天，就减去8.64e7
                endDay = Date.now() - 8.64e6;
            };
            return (
                // 选择开始时间后，返回限制条件
                time.getTime() < startDay || time.getTime() > endDay
            )
        }else{
            return (
                //　默认打开时限制不能选择当前日期以后的天数
                time.getTime() > (Date.now() - 8.64e6)
            )
        }
    }
}

3. 最终效果如下：

data

0 人点赞