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()
                    }
                },