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;
	    },
	}
}

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

Logo

前往低代码交流专区

更多推荐