el-date-picker 月份范围选择限制最大范围

需求描述

　　月份范围选择时，限制月份范围最大为 12 个月。

思路

　　选择了一个月份后，禁用该月份前后 12 个月之外的选项。
　　第一步，通过 DatePicker 提供的 pickerOptions.onPick 监听日期选中事件，记录 minDate 和 maxDate。
　　第二步，通过 DatePicker 提供的 pickerOptions.disabledDate 禁用 minDate 前后 12 个月之外的月份选项。

需要注意的是，Element 文档指出 onPick 事件只有当 type 的值为 daterange 或 datetimerange 时才生效 ，但实际中，type 的值为 monthrange 时也会生效。

文档地址

实现

<template>
	<el-date-picker
		v-model="dateList" 
		@blur="resetMinDate"
		:picker-options="pickerOptions"
		size="small"
		type="monthrange"
		value-format="timestamp"
		range-separator="至"
		start-placeholder="开始月份"
		end-placeholder="结束月份">
	</el-date-picker>
</template>

<script>

export default {
    data() {
        return {
            dateList: [],
            minDate: null,
            maxDate: null,
            pickerOptions: {
                disabledDate: (time) => {
                    if (this.minDate !== null && this.maxDate === null) {
                        let minMonth = this.minDate.getMonth(),
                            lastYear = new Date(this.minDate).setMonth(minMonth - 11),
                            nextYear = new Date(this.minDate).setMonth(minMonth + 11);
                        // 只能选 minDate 前后一年的范围
                        return time.valueOf() < lastYear.valueOf() || time.valueOf() > nextYear.valueOf();
                    }
                    return false;
                },
                onPick: ({minDate, maxDate}) => {
                    this.minDate = minDate;
                    this.maxDate = maxDate;
                }
            },
        }
    },
    methods: {
        resetMinDate() {
            if (this.dateList && this.dateList.length && this.minDate && !this.maxDate) {
		        this.minDate = new Date(this.dateList[0]);
		    } else {
		        this.minDate = null;
		    }
        },
    },
};
</script>

选择月份范围时，需要选择两个月份，其组成的范围才会回显在组件上

这就产生了一个疑问，即选中第一个月份后，使组件失去焦点，然后再打开组件选第二个月份，此时两次选择所组成的范围会回显到组件上吗？

答：不同的情况下，以上操作会有不同的表现

情况1：组件有初始值

　　这种情况下，会有月份范围回显到组件上，但并不一定是两次选中的月份组成的范围。确切的说，组件将会回显初始值的第一个月份（minDate）和第二个选中的月份组件的范围。

情况2：组件无初始值

　　这种情况下，不会有月份范围回显到组件上，且第二个选中的月份不会有选中效果。选中第二个月份时，onPick 的 minDate 为 null ，maxDate 为选中第二个月份。

效果