ElementUI DatePicker 日期选择器控制选择时间范围

比眉伴天荒 2021-12-15 00:37 681阅读 0赞

选择今天以及今天之后的日期

<el-date-picker
           v-model="value1"
           type="date"
           placeholder="选择日期"
           :picker-options="pickerOptions0">
    </el-date-picker>
    
    data(){
        return {
            pickerOptions0: { 
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的 
                }
            }
        }  
    }

选择今天以及今天以前的日期

data (){
       return {
           pickerOptions0: {
              disabledDate(time) {
                return time.getTime() > Date.now() - 8.64e6;//如果没有后面的-8.64e6就是不可以选择今天的
              }
            },  
       }     
    }

限制结束日期不能大于开始日期

<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>
    
    data(){
        return {
             pickerOptions0: {
                    disabledDate: (time) => {
                        if (this.value2 != "") {
                            return time.getTime() >  new Date(this.value2).getTime();
     
                    }
                },
                pickerOptions1: {
                    disabledDate: (time) => {
                        return time.getTime() < new Date(this.value1).getTime()- 1*24*60*60*1000;//减去一天的时间代表可以选择同一天;
                    }
                },
        }      
    }

限制选择开始时间不能小于当前时间。并且结束时间不能大于开始时间（比上面多了层限时）

pickerOptions0: {
        //结束时间不能大于开始时间
        disabledDate: time => {
            if (this.addForm.date_range_end) {
                return (
                    time.getTime() >
                    new Date(this.addForm.date_range_end).getTime()
                );
            } else {
                //还没有选择结束时间的时候，让他只能选择今天之后的时间包括今天
                return time.getTime() < Date.now() - 8.64e7;
            }
        }
    },
    pickerOptions1: {
        disabledDate: time => {
            if (this.addForm.date_range_start) {
                return (
                    time.getTime() <
                    new Date(this.addForm.date_range_start).getTime() -
                        1 * 24 * 60 * 60 * 1000
                ); //可以选择同一天
            }
        }
    },

限制不能选择今年之后的年份

<el-date-picker v-model="year" type="year" placeholder="选择年度" value-format="yyyy" :picker-options="pickerOptions0"></el-date-picker>

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

转载于:https://www.cnblogs.com/wangjae/p/10564709.html