element ui --- el-date-picker 设置可选择日期范围为30天

el-date-picker 设置可选择日期范围，选择框第一个日期的前30天或者后三十天。其他日期为不可点击状态。

 <el-form-item label="日期：" v-if="dataIsShow">
       <el-date-picker
            :picker-options="pickerOptions"
             style="width:23%" 
             v-model="time"
             type="daterange"
             range-separator="至"
             start-placeholder="开始日期"
             end-placeholder="结束日期"
             value-format="yyyyMMdd"
             @change="timeChangeVal(time)"
          ></el-date-picker>
</el-form-item>

在data里定义pickerOptions 即可。

pickerOptions:{
                onPick: (obj) => {
                    this.pickerMinDate = new Date(obj.minDate).getTime();
                },
                disabledDate:(time)=> {
                    if (this.pickerMinDate) {
                        const day1 =  30 * 24 * 3600 * 1000
                        let maxTime = this.pickerMinDate + day1
                        let minTime = this.pickerMinDate - day1
                        return time.getTime() > maxTime || time.getTime()<minTime || time.getTime() > Date.now()-1 * 24 * 3600 * 1000
                    }else{
                        return time.getTime() > Date.now()-1 * 24 * 3600 * 1000
                    }
                    
                }
            },    

// 小于今日的日期禁选

 pickerOptions:{

                disabledDate(val){

                    return val.getTime() < new Date().getTime() - 86400000;

                }

            },