diff --git a/src/VueDatePicker/components/MonthPicker/month-picker.ts b/src/VueDatePicker/components/MonthPicker/month-picker.ts index c699a6ab..570d3ac3 100644 --- a/src/VueDatePicker/components/MonthPicker/month-picker.ts +++ b/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 }; diff --git a/src/VueDatePicker/composables/validation.ts b/src/VueDatePicker/composables/validation.ts index f7337326..747ace7c 100644 --- a/src/VueDatePicker/composables/validation.ts +++ b/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 || diff --git a/src/VueDatePicker/utils/date-utils.ts b/src/VueDatePicker/utils/date-utils.ts index 767e3fe0..de1524d8 100644 --- a/src/VueDatePicker/utils/date-utils.ts +++ b/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]; +}; diff --git a/tests/unit/components/MonthYearPicker.spec.ts b/tests/unit/components/MonthYearPicker.spec.ts index 5ad43f27..c1c188ba 100644 --- a/tests/unit/components/MonthYearPicker.spec.ts +++ b/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; diff --git a/tests/unit/utils.spec.ts b/tests/unit/utils.spec.ts index bb339048..3e5a02e6 100644 --- a/tests/unit/utils.spec.ts +++ b/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).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(); + }); });