fix: allowed-dates not marking disabled months in month-picker (f…

…ixes #1008)
Vuepic · Nov 2, 2024 · 85eafc0 · 85eafc0
1 parent 3f9f1ea
commit 85eafc0
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/src/VueDatePicker/components/MonthPicker/month-picker.ts b/src/VueDatePicker/components/MonthPicker/month-picker.ts
@@ -9,6 +9,7 @@ import {
     getMaxMonth,
     getMinMonth,
     isDateBetween,
+    isMonthAllowed,
     resetDate,
     setDateMonthOrYear,
 } from '@/utils/date-utils';
@@ -136,7 +137,8 @@ export const useMonthPicker = (props: PickerBasePropsType, emit: VueEmit) => {
                     getMaxMonth(year.value(instance), propDates.value.maxDate),
                 ) ||
                 getDisabledMonths(propDates.value.disabledDates, year.value(instance)).includes(month.value) ||
-                defaultedFilters.value.months?.includes(month.value);
+                defaultedFilters.value.months?.includes(month.value) ||
+                !isMonthAllowed(propDates.value.allowedDates, year.value(instance), month.value);
             const isBetween = isMonthBetween(month.value, instance);
             const highlighted = checkHighlightMonth(defaultedHighlight.value, month.value, year.value(instance));
             return { active, disabled, isBetween, highlighted };

diff --git a/src/VueDatePicker/utils/date-utils.ts b/src/VueDatePicker/utils/date-utils.ts
@@ -415,6 +415,20 @@ export const getDisabledMonths = (
     return [];
 };
 
+export const isMonthAllowed = (
+    disabledDates: Map<string, Date | null> | null | ((date: Date) => boolean),
+    year: number,
+    month: number,
+) => {
+    if (disabledDates instanceof Map) {
+        const months = Array.from(disabledDates.values())
+            .filter((date) => getYear(getDate(date)) === year)
+            .map((date) => getMonth(date as Date));
+        return months.length ? months.includes(month) : true;
+    }
+    return true;
+};
+
 export const checkHighlightMonth = (defaultedHighlight: Highlight | HighlightFn, month: number, year: number) => {
     return typeof defaultedHighlight === 'function'
         ? defaultedHighlight({ month: month, year })