elementui日期限制前后不能超过五天

template模块

<el-date-picker
    v-model="dcTime"
    type="daterange"
    range-separator=""
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    format="yyyy 年 MM 月 dd 日"
    value-format="yyyy-MM-dd"
    :picker-options="pickerOptions"
>
</el-date-picker>

js模块

data(){
    return {
        dcTime: [],
        // 日期选择器可选择范围
        choiceDate: null,
        pickerOptions: {
        onPick: ({
                maxDate,
                minDate
            }) => {
                // 把选择的第一个日期赋值给一个变量。
                this.choiceDate = minDate.getTime();
                // 如何你选择了两个日期了,就把那个变量置空
                if (maxDate) this.choiceDate = "";
            },
            disabledDate: time => {
                // 如何选择了一个日期
                if (this.choiceDate) {
                    // 5天的时间戳
                    const one = 5 * 24 * 3600 * 1000;
                    // 当前日期 - one = 5天之前
                    const minTime = this.choiceDate - one;
                    // 当前日期 + one = 5天之后
                    const maxTime = this.choiceDate + one;
                    return (
                        time.getTime() < minTime ||
                        time.getTime() > maxTime ||
                        // 限制不能选择今天及以后,不能今天用time.getTime() + 1 * 24 * 3600 * 1000 > Date.now()
                        time.getTime() > Date.now()
                    );
                } else {
                    // 如果没有选择日期,就要限制不能选择今天及以后                        
                    return time.getTime() > Date.now()
                }
            }
        }
    }
}
Copyright © lujiannb@qq.com 2021 all right reserved,powered by Gitbook该文章修订时间: 2024-06-06 11:32:07

results matching ""

    No results matching ""