diff --git a/src/test/year_picker_test.test.tsx b/src/test/year_picker_test.test.tsx index 3ff0e4e83b..440c9bc3d1 100644 --- a/src/test/year_picker_test.test.tsx +++ b/src/test/year_picker_test.test.tsx @@ -107,6 +107,47 @@ describe("YearPicker", () => { expect(year).toBe(getYear(date).toString()); }); + it("should has selected class applied for all the selectedDates when selectsMultiple is set", () => { + const selectedDates = [new Date("2025-01-01"), new Date("2026-01-01")]; + const { container } = render( + {}} + onYearMouseLeave={() => {}} + />, + ); + const yearElements = Array.from( + container.querySelectorAll(".react-datepicker__year-text--selected"), + ); + + expect(yearElements.length).toBe(selectedDates.length); + + const isSelectedDatesHighlighted = yearElements.every((yearElement) => { + const yearValue = yearElement?.textContent; + return selectedDates.some( + (selectedDate) => getYear(selectedDate).toString() === yearValue, + ); + }); + expect(isSelectedDatesHighlighted).toBe(true); + }); + + it("should not has selected class where there is no selectedDates when selectsMultiple is set", () => { + const { container } = render( + {}} + onYearMouseLeave={() => {}} + />, + ); + const yearElements = Array.from( + container.querySelectorAll(".react-datepicker__year-text--selected"), + ); + expect(yearElements.length).toBe(0); + }); + it("should have current year class when element of array equal of current year", () => { const date = new Date(); const { container } = render( diff --git a/src/year.tsx b/src/year.tsx index a32c3e7df4..8bbfad1825 100644 --- a/src/year.tsx +++ b/src/year.tsx @@ -38,6 +38,8 @@ interface YearProps ) => void; preSelection?: Date | null; setPreSelection?: (date?: Date | null) => void; + selectsMultiple?: boolean; + selectedDates?: Date[]; selected?: Date | null; inline?: boolean; usePointerEvent?: boolean; @@ -240,6 +242,15 @@ export default class Year extends Component { ); }; + isSelectedYear = (year: number) => { + const { selectsMultiple, selected, selectedDates } = this.props; + + if (selectsMultiple) { + return selectedDates?.some((date) => year === getYear(date)); + } + return !selected || year === getYear(selected); + }; + onYearClick = ( event: | React.MouseEvent @@ -360,7 +371,6 @@ export default class Year extends Component { date, minDate, maxDate, - selected, excludeDates, includeDates, filterDate, @@ -372,9 +382,7 @@ export default class Year extends Component { `react-datepicker__year-${y}`, date ? yearClassName?.(setYear(date, y)) : undefined, { - "react-datepicker__year-text--selected": selected - ? y === getYear(selected) - : undefined, + "react-datepicker__year-text--selected": this.isSelectedYear(y), "react-datepicker__year-text--disabled": (minDate || maxDate || excludeDates || includeDates || filterDate) && isYearDisabled(y, this.props),