ElementUI日期选择器选择范围限制

elementUI 是饿了么推出的一套基于Vue2.0的UI框架，当然随着去年Vue3的推出也跟着做了升级，这里以vue2.0版本的element做例子

官方文档中使用picker-options属性来限制可选择的日期，这里举例子作补充

单个输入框的组件代码

<el-date-picker
    v-model="date1"
    type="date"
    placeholder="选择日期"
    :picker-options="pickerOption">
</el-date-picker>

情景1：只能选择今天以及今天之后的日期

data() {
    return {
        date1: '',
        pickerOption: {
            disabledDate(time) {
                return time.getTime() < Date.now() - 8.64e7;
            }
        }
    }
}

情景2：只能选择今天以及今天以前的日期（相比较情景一就是小于符号【<】改为大于符号【>】）

data() {
    return {
        date1: '',
        pickerOption: {
            disabledDate(time) {
                return time.getTime() > Date.now() - 8.64e7;
            }
        }
    }
}

情景3：选择今天之后的日期（不包括当天）

注：包括当天加上=符号 <=

data() {
    return {
        date1: '',
        pickerOption: {
            disabledDate(time) {
                return time.getTime() < Date.now();
            }
        }
    }
}

情景4：选择今天之前的日期（不包括当天）【与情景3作对比】

注：包括当天加上=符号 >=

data() {
    return {
        date1: '',
        pickerOption: {
            disabledDate(time) {
                return time.getTime() > Date.now();
            }
        }
    }
}

情景5:选择三个月之前到今天的日期（包括当天）

data (){
   return {
        date1: '',
           pickerOptions: {
           disabledDate(time) {
                let curDate = (new Date()).getTime();
                let three = 90 * 24 * 3600 * 1000;
                let threeMonths = curDate - three;
                return time.getTime() > Date.now() || time.getTime() < threeMonths;;
          }
        },  
   }     
} 

情景6：选择当月到当天的日期：如今天20号，只能选择5.01到5.20这其中某天

data() {
    return {
        date1: '',
        pickerOption: {
            disabledDate(time) {
                let curDate = (new Date()).getTime();
                let curDay = (new Date()).getDate();
                let three = curDay * 24 * 3600 * 1000;
                let threeMonths = curDate - three;
                return time.getTime() > Date.now() || time.getTime() < threeMonths;;
            }
        }
    }
}

两个输入框组件代码

<el-date-picker
       v-model="date2"
       type="date"
       placeholder="开始日期"
       :picker-options="pickerOptions0">
</el-date-picker>
<el-date-picker
       v-model="date3"
       type="date"
       placeholder="结束日期"
       :picker-options="pickerOptions1">
</el-date-picker>

情景1：限制结束日期不能大于开始日期

data(){
    return {
         pickerOptions0: {
                disabledDate: (time) => {
                    if (this.date3 != "") {
                        return time.getTime() > Date.now() || time.getTime() > this.date3;
                    } else {
                        return time.getTime() > Date.now();
                    }
                }
            },
            pickerOptions1: {
                disabledDate: (time) => {
                    return time.getTime() < this.date2 || time.getTime() > Date.now();
                }
            },
    }      
}   

针对选择范围type="daterange"的日期做筛选，相当于单个输入框的情况，直接使用参数time进行判断