fix: disable months if the selected year is out of range

Author: spider-hand

src/VueDatePicker/components/MonthPicker/month-picker.ts

@@ -10,6 +10,7 @@ import {
     isDateBetween,
     isMonthAllowed,
     isMonthDisabled,
+    isOutOfYearRange,
     resetDate,
     setDateMonthOrYear,
 } from '@/utils/date-utils';
@@ -138,7 +139,8 @@ export const useMonthPicker = (props: PickerBasePropsType, emit: VueEmit) => {
                 ) ||
                 isMonthDisabled(propDates.value.disabledDates, year.value(instance), month.value) ||
                 defaultedFilters.value.months?.includes(month.value) ||
-                !isMonthAllowed(propDates.value.allowedDates, year.value(instance), month.value);
+                !isMonthAllowed(propDates.value.allowedDates, year.value(instance), month.value) ||
+                isOutOfYearRange(props.yearRange, year.value(instance));
             const isBetween = isMonthBetween(month.value, instance);
             const highlighted = checkHighlightMonth(defaultedHighlight.value, month.value, year.value(instance));
             return { active, disabled, isBetween, highlighted };

src/VueDatePicker/composables/validation.ts

@@ -8,6 +8,7 @@ import {
     isDateAfter,
     isDateBefore,
     isDateEqual,
+    isOutOfYearRange,
     resetDate,
     setTimeValue,
 } from '@/utils/date-utils';
@@ -54,7 +55,7 @@ export const useValidation = (props: PickerBasePropsType | AllPropsType) => {
 
         const dateYear = getYear(date);
 
-        const outOfYearRange = dateYear < +props.yearRange[0] || dateYear > +props.yearRange[1];
+        const outOfYearRange = isOutOfYearRange(props.yearRange, dateYear);
 
         return !(
             aboveMax ||

src/VueDatePicker/utils/date-utils.ts

@@ -455,3 +455,7 @@ export const getBeforeAndAfterInRange = (range: number, date: Date) => {
     const after = addDays(resetDateTime(date), range);
     return { before, after };
 };
+
+export const isOutOfYearRange = (yearRange: number[], year: number) => {
+    return year < +yearRange[0] || year > +yearRange[1];
+};

tests/unit/components/MonthYearPicker.spec.ts

@@ -166,6 +166,34 @@ describe('Month and Year picker components', () => {
         expect(disabledValue).toHaveProperty('disabled', true);
     });
 
+    it('Should disable months based on the year range', async () => {
+        const currentYear = getYear(new Date());
+        const previousYear = currentYear - 1;
+        const wrapper = mount(MonthPicker, {
+            props: { ...props, year: currentYear, yearRange: [currentYear, currentYear], monthPicker: true },
+        }) as unknown as MonthPickerCmp<{
+            handleYearSelect: (selectedYear: number, i: number) => void;
+            groupedMonths: (i: number) => OverlayGridItem[][];
+        }>;
+
+        const monthValues = wrapper.vm.groupedMonths(0);
+        monthValues.forEach((row) => {
+            row.forEach((month) => {
+                expect(month.disabled).toBeFalsy();
+            });
+        });
+
+        wrapper.vm.handleYearSelect(previousYear, 0);
+        await nextTick();
+
+        const updatedMonthValues = wrapper.vm.groupedMonths(0);
+        updatedMonthValues.forEach((row) => {
+            row.forEach((month) => {
+                expect(month.disabled).toBeTruthy();
+            });
+        });
+    });
+
     it('Should render multi-calendars in month picker mode', async () => {
         const wrapper = mount(MonthPicker, { props: { ...props, multiCalendars: true } }) as unknown as MonthPickerCmp<{
             year: (inst: number) => number;

tests/unit/utils.spec.ts

@@ -39,6 +39,7 @@ import {
     isDateAfter,
     isDateBefore,
     isDateBetween,
+    isOutOfYearRange,
     isValidDate,
     parseFreeInput,
     resetDate,
@@ -492,4 +493,16 @@ describe('Utils and date utils formatting', () => {
         expect((mappedDatesInTimezone.allowedDates as Map<string, any>).get(getMapKey(todayInTz))).toEqual(todayInTz);
         expect(mappedDatesInTimezone.highlight).toEqual(highlightFn);
     });
+
+    it('Should check if the year is out of range', () => {
+        const yearRange = [2020, 2025];
+        const yearInRange = 2023;
+        const yearOutOfRange = 2019;
+
+        expect(isOutOfYearRange(yearRange, yearInRange)).toBeFalsy();
+        expect(isOutOfYearRange(yearRange, yearOutOfRange)).toBeTruthy();
+
+        const emptyRange: number[] = [];
+        expect(isOutOfYearRange(emptyRange, yearInRange)).toBeFalsy();
+    });
 });