fix: mode=['month','month']时disabled-date不生效

components/vc-calendar/src/RangeCalendar.jsx

@@ -15,7 +15,7 @@ import OkButton from './calendar/OkButton';
 import TimePickerButton from './calendar/TimePickerButton';
 import CommonMixin from './mixin/CommonMixin';
 import enUs from './locale/en_US';
-import { syncTime, getTodayTime, isAllowedDate } from './util/';
+import { syncTime, getTodayTime, isAllowedDate, isDisabledMonthDate } from './util/';
 import { goTime, goStartMonth, goEndMonth, includesTime } from './util/toTime';
 
 function noop() {}
@@ -645,14 +645,19 @@ const RangeCalendar = {
       return this.disabledTime(time, 'end');
     },
 
+    /**
+     * 
+     * @param {*} month 
+     * @returns hope mode as ['month','month'] can support disable-date
+     */
     disabledStartMonth(month) {
       const { sValue } = this;
-      return month.isAfter(sValue[1], 'month');
+      return isDisabledMonthDate(month,sValue[1],this.disabledDate,'start');
     },
 
     disabledEndMonth(month) {
       const { sValue } = this;
-      return month.isBefore(sValue[0], 'month');
+      return isDisabledMonthDate(month,sValue[0],this.disabledDate,'end');
     },
   },
 

components/vc-calendar/src/util/index.js

@@ -111,3 +111,29 @@ export function formatDate(value, format) {
 
   return value.format(format);
 }
+
+/**
+ * 
+ * @param {*} current The value accepted by the component 
+ * @param {*} checked The checked accepted by the component 
+ * @param {*} disabledMonthDateFunc 
+ * @param {*} type 'start' or 'end'
+ * @returns if without disabledMonthDateFunc,Follow the original logic,else check the disabledMonthDateFunc
+ */
+
+ export function isDisabledMonthDate(current, checked, disabledMonthDateFunc, type) {
+  if (type === 'start') {
+    console.log(disabledMonthDateFunc)
+    if (!disabledMonthDateFunc) {
+      return current.isAfter(checked, 'month');
+    } else {
+      return current.isAfter(checked, 'month') || disabledMonthDateFunc(current);
+    }
+  } else if (type === 'end') {
+    if (!disabledMonthDateFunc) {
+      return current.isBefore(checked, 'month');
+    } else {
+      return current.isBefore(checked, 'month') || disabledMonthDateFunc(current);
+    }
+  }
+}

examples/App.vue

@@ -32,14 +32,37 @@
         { key: 'tab2', tab: 'tab2' },
       ]"
     />
+
+    <a-range-picker
+      :placeholder="['Start month', 'End month']"
+      format="YYYY-MM"
+      :value="value"
+      :mode="['year', 'year']"
+      @panelChange="handleChange"
+      @change="handleChange"
+      :disabled-date="disabledDate"
+    />
   </div>
 </template>
 <script>
+import moment from 'moment';
 export default {
   data() {
     return {
+      value: [],
       text: `A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.`,
     };
   },
+  methods: {
+    handleChange(value) {
+      this.value = value;
+    },
+    disabledDate(current) {
+      return (
+        moment().endOf('month') < moment(current).endOf('month') ||
+        moment().subtract('12', 'month').endOf('month') > moment(current).endOf('month')
+      );
+    },
+  },
 };
 </script>