Vue结合Element-UI禁止选择当前时间以后的天数,并限制查询天数

1. 添加选择限制 pickerOptions

2. 在data里定义pickerOptions

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. 最终效果如下:

Vue结合Element-UI禁止选择当前时间以后的天数,并限制查询天数_第1张图片

 

你可能感兴趣的:(Vue)