element添加日期限制

我不是女神ヾ 2023-05-22 13:26 28阅读 0赞

一、单个日期框

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

情景1: 设置选择今天以及今天之后的日期

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

情景2: 设置选择今天以及今天以前的日期

data (){
       return {
           pickerOptions0: {
              disabledDate(time) {
                return time.getTime() > Date.now() - 8.64e6
              }
            },  
       }     
    }

情景3: 设置选择今天之后的日期（不能选择当天时间）

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

情景4: 设置选择今天之前的日期（不能选择当天）

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

情景5: 设置选择三个月之前到今天的日期

data (){
       return {
           pickerOptions0: {
              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;;
              }
            },  
       }     
    }

二、两个日期框

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

情景1: 限制结束日期必须大于开始日期

data(){
        return {
             pickerOptions0: {
                    disabledDate: (time) => {
                        let endDateVal = this.value2;
                        if (endDateVal) {
                            return time.getTime() > new Date(endDateVal).getTime();
                        }
    
                    }
                },
                pickerOptions1: {
                    disabledDate: (time) => {
                       let beginDateVal = this.value1;
                       if (beginDateVal) {
                           return (
                              time.getTime() <
                              new Date(beginDateVal).getTime() - 1 * 24 * 60 * 60 * 1000
                            );
                      }
                    }
                },
        }      
    }