element关于日期范围选择控件，如何限制只能选择30天切不能大于当前时间

element关于日期范围选择控件，如何限制只能选择30天切不能大于当前时间

两种组件方法

第一种选择两个日期组件

页面

                       <el-date-picker
                        v-model="form.startTime"
                        type="datetime"
                        :picker-options="pickerOptionsStart"
                        placeholder="选择开始时间"/>
                        至
                        <el-date-picker
                        v-model="form.endTime"
                        type="datetime"
                        :picker-options="pickerOptionsEnd"
                        placeholder="选择结束时间"/> 

js 在data里定义

              form:{
                   operateType:'', //操作类型
                   startTime:'', //操作开始时间
                   endTime:'', //操作结束时间
                },
               pickerOptionsStart:{
                    disabledDate: (time) => {
                        if(this.form.endTime){
                            const day30 = (30 - 1) * 24 * 3600 * 1000
                            let minTime = this.form.endTime - day30
                            if (minTime > new Date()) {
                                minTime = new Date()
                            }
                            return time.getTime() < minTime || time.getTime() > new Date()
                        }
                        return time.getTime() > new Date()                        
                    }
                },
                pickerOptionsEnd:{
                    disabledDate: (time) => {
                        if(this.form.startTime){
                            const day30 = (30 - 1) * 24 * 3600 * 1000
                            let maxTime = this.form.startTime + day30
                            if (maxTime > new Date()) {
                                maxTime = new Date()
                            }
                            return time.getTime() > maxTime || time.getTime() > new Date() || time.getTime() < this.form.startTime
                        }
                        return time.getTime() > new Date() 
                    }
                },

第二种选择是个时间范围组件

页面

                       <el-date-picker 
                        range-separator="至"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        v-model="timeRange"
                        @change="setFormDate"
                        :picker-options="pickerOptions"
                        type="datetimerange"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间">
                        </el-date-picker>

js在data定义

                pickerMinDate:'',//获取开始选择时间
                pickerMaxDate:'',//获取结束选择时间
                pickerOptions: { //时间范围选择控制
                    onPick: ({ maxDate, minDate }) => {
                        if(minDate){
                           this.pickerMinDate = minDate.getTime()
                        }                        
                        if (maxDate) {
                           this.pickerMinDate = ''
                           this.pickerMaxDate =  maxDate.getTime()
                        }
                    },
                    disabledDate: (time) => {
                        const day30 = (30 - 1) * 24 * 3600 * 1000
                        if (this.pickerMinDate !== '') {
                            let maxTime = this.pickerMinDate + day30
                            if (maxTime > new Date()) {
                                maxTime = new Date()
                            }
                            return time.getTime() > maxTime || time.getTime() > Date.now()
                        }
                        if (this.pickerMaxDate !== '' && !this.pickerMinDate) {
                            let minTime = this.pickerMaxDate - day30
                            return time.getTime() < minTime || time.getTime() > Date.now()
                        }
                        return time.getTime() > Date.now()
                    }
                },