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

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

两种组件方法

第一种选择两个日期组件

页面

                        

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

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

页面

                       
                        

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

你可能感兴趣的:(vue方法)