Repository: Hacker0x01/react-datepicker (ts)

Issue:
Missing `selected` class on multi-select Year Picker
**Describe the bug**
When using `selectsMultiple` along with `showYearPicker`, when I select various years they are not getting the selected class and therefore not able to style as selected.

**To Reproduce**
```jsx
const MultiYearPicker = () => {
  const [selectedDates, setSelectedDates] = useState([]);

  return (
    <DatePicker
      placeholder="Select years"
      dateFormat="yyyy"
      showYearPicker
      selectsMultiple
      selectedDates={selectedDates}
      onChange={setSelectedDates}
      shouldCloseOnSelect={false}
      disabledKeyboardNavigation
    />
  );
};
```

1. When I select years, say 2019 and 2024
2. These years are added to state and I see the dates in the input
3. But those year divs do not get the `react-datepicker__year-text--selected` classes so they remain unstyled. 
(This may be issue with other `show_Picker` variations, but `showYearPicker` is what I've tested.

**Expected behavior**
I expect the selected class being applied. 

**Screenshots**

https://github.com/user-attachments/assets/f792af8a-67f9-46fc-9fde-f6444deab02a



**Desktop (please complete the following information):**

- OS: macOS
- Browser: chrome
- Version 131


Pull request description:
🐛🎨 Apply the `--selected` class for the YearPicker when the `selectsMultiple` is enabled
Closes #5322

## Description
As mentioned in the linked ticket, we failed to update the `--selected` styling when the `selectsMultiple` is enabled on the Year Picker.  I added the fix for it by checking the `selectedDates` prop when the `selectsMultiple` is enabled, if not then to check the `selected` prop.

## Contribution checklist
- [x] I have followed the [contributing guidelines](https://github.com/Hacker0x01/react-datepicker/blob/main/CONTRIBUTING.md).
- [x] I have added sufficient test coverage for my changes.
- [x] I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.


Patch:
diff --git a/src/year.tsx b/src/year.tsx
index a32c3e7d..8bbfad18 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<YearProps> {
     );
   };
 
+  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<HTMLDivElement, MouseEvent>
@@ -360,7 +371,6 @@ export default class Year extends Component<YearProps> {
       date,
       minDate,
       maxDate,
-      selected,
       excludeDates,
       includeDates,
       filterDate,
@@ -372,9 +382,7 @@ export default class Year extends Component<YearProps> {
       `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),


Test patch:
diff --git a/src/test/year_picker_test.test.tsx b/src/test/year_picker_test.test.tsx
index 3ff0e4e8..440c9bc3 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(
+      <Year
+        selectsMultiple
+        selectedDates={selectedDates}
+        date={selectedDates[0]}
+        onYearMouseEnter={() => {}}
+        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(
+      <Year
+        selectsMultiple
+        date={new Date()}
+        onYearMouseEnter={() => {}}
+        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(