element-ui限制时间选择范围一个月(datepicker),限制后一直禁用的问题

在使用elementUI的时间范围选择时,我这里的需求是只能选择一个月范围内的数据,其超出一个的要禁用,效果如下:

这是我一开始的代码:

pickerOptions: {
    onPick: ({
        maxDate,
        minDate
    }) => {
        this.pickerMinDate = minDate.getTime()
        if (maxDate) {
            this.pickerMinDate = ''
        }
    },
    disabledDate: (time) => {
        if (this.pickerMinDate !== '') {
            const one = 30 * 24 * 3600 * 1000
            const minTime = this.pickerMinDate - one
            const maxTime = this.pickerMinDate + one
            return time.getTime() < minTime || time.getTime() > maxTime

        }
    }
},

 这样的话,会存在一个小问题,请注意我的时间段和时间禁用的描述。

先选中一个月的时间段,比如说时间段A: 2022-11-01至时间段B:2022-12-01,这个时候我再点开日期选择框,选择一个开始时间C:2022-10-03不继续后续操作了,这时触发了上述代码中的onPick方法,造成禁用日期变成了11月3号及之后的与9月3号之前的都被禁用了,效果如下图:

 

这是我失焦选择的时间C之后,再次打开的样子:

 

这明显不是我想要的结果,此时应该时没有禁用的时间,能够自由选择才对,解决方法来了:

定义一个isRestart变量,用于记录时间选择框是否为重新打开且没有选择过开始时间的选择框,如果是,那么就不执行禁用时间的方法,如果重新打开过了,又选择了开始时间C没有选择结束时间,那就将isRestart置为false,执行禁用时间的逻辑,需要修改代码为:

pickerOptions: {
    onPick: ({
        maxDate,
        minDate
    }) => {
        this.isRestart = false
        this.pickerMinDate = minDate.getTime()
        if (maxDate) {
            this.pickerMinDate = ''
        }
    },
    disabledDate: (time) => {
        if (this.curveTime && this.isRestart) {
            // 存在选中的日期且没有重新选择日期 不做禁用处理
            return
        }
        if (this.pickerMinDate !== '') {
            const one = 30 * 24 * 3600 * 1000
            const minTime = this.pickerMinDate - one
            const maxTime = this.pickerMinDate + one
            return time.getTime() < minTime || time.getTime() > maxTime

        }
    }
},

注意:每次日期选择器失焦的时候,需要将isRestart置为true

<el-date-picker
    :picker-options="pickerOptions"
    v-model="curveTime"
    type="daterange"
    range-separator="~"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    @change="chooseTimeRange" 
    :clearable="clearable"
    @blur="isRestart = true">
</el-date-picker>

这样,一个完整的日期选择并且限制为一个月的需求就好了

 

posted @ 2022-11-24 15:40  月月月月月  阅读(4127)  评论(0)    收藏  举报