el-date-picker选月份区间控制禁选

el-date-picker只能选近12个月

效果图

代码

<!--
* @description 选择近12个月
* @date 2025-01-15
!-->
<template>
    <div>
        <el-date-picker ref="monthRangeRef" v-model="monthRange" class="month-range" type="monthrange" value-format="yyyy-MM" :picker-options="pickerOptions" @blur="resetMinDate"></el-date-picker>
    </div>
</template>

<script>
export default {
    data() {
        return {
            monthRange: [],
            minDate: null,
            maxDate: null,
            pickerOptions: {
                disabledDate: time => {
                    if (this.minDate && !this.maxDate) {
                        const minMonth = this.minDate.getMonth()
                        const last = new Date(this.minDate).setMonth(minMonth - 11)
                        const next = new Date(this.minDate).setMonth(minMonth + 11)
                        return time.valueOf() < last.valueOf() || time.valueOf() > next.valueOf()
                    }
                },
                onPick: ({ maxDate, minDate }) => {
                    this.minDate = minDate
                    this.maxDate = maxDate
                }
            }
        }
    },
    created() {},
    methods: {
        resetMinDate() {
            if (this.monthRange && this.monthRange.length && this.minDate && !this.maxDate) {
                this.minDate = new Date(this.monthRange[0])
            } else {
                this.minDate = null
            }
        }
    }
}
</script>