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

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

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

代码如下：

1.html部分

<a-month-pickerv-model="monthArr[0]":disabled-date="disabledStartDateMonth"format="YYYY-MM"placeholder="开始月份"@openChange="handleStartOpenChangeMonth"
/>
<a-month-pickerv-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;},}
}

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