antd+vue实现月份区间选择器+限制最多12个月区间可选

最近在做后台管理系统时，遇到一个月份选择器的需求，要求开始月份与结束月份不能超过12个月，可以跨年。

比如：开始月份选择为2022-03，结束月份必须是2022-02以后的月份，且不能超过2023-02。

代码如下：

1.html部分

<a-month-picker
  v-model="monthArr[0]"
  :disabled-date="disabledStartDateMonth"
  format="YYYY-MM"
  placeholder="开始月份"
  @openChange="handleStartOpenChangeMonth"
/>
<a-month-picker
  v-model="monthArr[1]"
  :disabled-date="disabledEndDateMonth"
  format="YYYY-MM"
  placeholder="结束月份"
  :open="endOpenMonth"
  @openChange="handleEndOpenChangeMonth"
/>

2.js部分——需要安装moment插件

import moment from 'moment';
export function(){
	data(){
		return{
			monthArr:[],
			endOpenMonth:false
		}
	},
	created() {
		//默认是当年的1月到12月
	    this.monthArr[0] = this.moment().format('YYYY') + '-01-01';
	    this.monthArr[1] = this.moment().format('YYYY') + '-12-31';
	},
	methods:{
		moment,
		//开始月份的禁用判断
		disabledStartDateMonth(current) {
	      const endValue = this.monthArr[1];
	      if (!current || !endValue) {
	        return false;
	      }
	      let year = this.moment(endValue).format('YYYY') * 1;
	      let month = this.moment(endValue).format('M') * 1;
	      //开始月份是根据结束月份往前推12个月，因此用下面的方法来处理，最后一个参数是月的个数
	      let preDate = this.getMonthDiff(year, month, 1, 12);
	      return (
	        current.valueOf() > endValue.valueOf() ||
	        current.valueOf() < this.moment(preDate).valueOf()
	      );
	    },
	    //结束月份的禁用判断
	    disabledEndDateMonth(current) {
	      const startValue = this.monthArr[0];
	      if (!current || !startValue) {
	        return false;
	      }
	      let year = this.moment(startValue).format('YYYY') * 1;
	      let month = this.moment(startValue).format('M') * 1;
	      //结束月份是根据开始月份往后推12个月，用下面的方法来处理，最后一个参数是月的个数，往前推是正数，往后推是负数。
	      let nextDate = this.getMonthDiff(year, month, 1, -12);
	      return (
	        current.valueOf() < startValue.valueOf() ||
	        current.valueOf() > this.moment(nextDate).valueOf()
	      );
	    },
	    //获取指定年月日的之前mon月数的时间，往前推是正数，往后推是负数
	    getMonthDiff(year, month, day, mon) {
	      if (month - mon < 0) {
	        month = 12 + (month - mon);
	        year -= 1;
	      } else if (month - mon > 12) {
	        month = month - mon - 12;
	        year += 1;
	      } else {
	        month = month - mon;
	      }
	      var days = new Date(year, month, 0).getDate();
	      if (day > days - 1) {
	        day = days - 1;
	      }
	      return `${year}-${month}-${day}`;
	    },
	    //开始月份监听面板的变化
	    handleStartOpenChangeMonth(open) {
	      if (!open) {
	        this.endOpenMonth = true;
	      }
	    },
	    //结束月份监听面板的变化
	   handleEndOpenChangeMonth(open) {
	      this.endOpenMonth = open;
	    },
	}
}

完成！！！感谢大家的支持！！！