Repository: Hacker0x01/react-datepicker (ts)

Issue:
showWeekNumbers with excludeDateIntervals is not working as expected
**Describe the bug**
Whenever we disable few week days except the first week day, clicking on the week number is not selecting the corresponding week.  However user can still select the enabled week days manually to select that complete week.

**To Reproduce**
Steps to reproduce the behavior:

1. Set showWeekNumbers prop
2. Disable any week day other than the first week day (if you enable the first weekday, it'll work)
3. Try to click the half-disabled week number
4. It won't select the week

**_Sample Code to reproduce the issue_**
```
() => {
  const [startDate, setStartDate] = useState(new Date("2021/02/22"));
  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      dateFormat="I/R"
      locale="en-GB"
      excludeDateIntervals={[
        { start: "2021/02/08", end: "2021/02/10" },
      ]}
      showWeekNumbers
      showWeekPicker
    />
  );
};
```

**Expected behavior**
It should select the corresponding week even at least one day of the week is enabled.

**Screenshots**
https://github.com/Hacker0x01/react-datepicker/assets/145029139/84523389-1805-4ad1-8aef-71c4a4ab01f1


Pull request:
Fix #4902: 🐛 Fix the click of week numbers when the first day of the week is not enabled
Closes #4902

**Problem**
As described in the linked issue, the problem occurs when we disable the first week of the day and using `excludeDateIntervals`  whereas the other days of the week are enabled.  In this case the select of the week number is not working.

**Changes**
- Select the first-enabled day of the week whenever the first day of the week is disabled (Currently it's returning the first day of the week when the first day is not disabled, else it's not selecting anything)
- Added corresponding test cases to validate the changes

## 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/examples/hello-world/package.json b/examples/hello-world/package.json
index 5c031703..09953c15 100644
--- a/examples/hello-world/package.json
+++ b/examples/hello-world/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "react": "^18.3.1",
-    "react-datepicker": "^7.0.0",
+    "react-datepicker": "^6.9.0",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1"
   },
diff --git a/examples/hello-world/yarn.lock b/examples/hello-world/yarn.lock
index e0c42524..9cd392f2 100644
--- a/examples/hello-world/yarn.lock
+++ b/examples/hello-world/yarn.lock
@@ -7340,10 +7340,10 @@ react-app-polyfill@^3.0.0:
     regenerator-runtime "^0.13.9"
     whatwg-fetch "^3.6.2"
 
-react-datepicker@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-7.0.0.tgz#432458c9ca3de201a624f31f81c808abab572d53"
-  integrity sha512-GXyf0nzmjl5vvj/bBbeJUWArfc/S6k0XaLV6zjUCFFZlDtdaHIwAwVAV5Z1vX2Gxc+5pw9HOa0j/0RRfwilAYw==
+react-datepicker@^6.9.0:
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-6.9.0.tgz#0ad234dad81d567ae64cad79697bbad69c95490b"
+  integrity sha512-QTxuzeem7BUfVFWv+g5WuvzT0c5BPo+XTCNbMTZKSZQLU+cMMwSUHwspaxuIcDlwNcOH0tiJ+bh1fJ2yxOGYWA==
   dependencies:
     "@floating-ui/react" "^0.26.2"
     clsx "^2.1.0"
diff --git a/src/week.tsx b/src/week.tsx
index fd6680ee..0027d557 100644
--- a/src/week.tsx
+++ b/src/week.tsx
@@ -1,7 +1,13 @@
 import { clsx } from "clsx";
 import React, { Component } from "react";
 
-import { addDays, getWeek, getStartOfWeek, isSameDay } from "./date_utils";
+import {
+  addDays,
+  getWeek,
+  getStartOfWeek,
+  isSameDay,
+  isDayDisabled,
+} from "./date_utils";
 import Day from "./day";
 import WeekNumber from "./week_number";
 
@@ -41,6 +47,17 @@ export default class Week extends Component<WeekProps> {
     };
   }
 
+  isDisabled = (day: Date): boolean =>
+    isDayDisabled(day, {
+      minDate: this.props.minDate,
+      maxDate: this.props.maxDate,
+      excludeDates: this.props.excludeDates,
+      excludeDateIntervals: this.props.excludeDateIntervals,
+      includeDateIntervals: this.props.includeDateIntervals,
+      includeDates: this.props.includeDates,
+      filterDate: this.props.filterDate,
+    });
+
   handleDayClick = (
     day: Date,
     event: React.MouseEvent<HTMLDivElement>,
@@ -61,11 +78,25 @@ export default class Week extends Component<WeekProps> {
     weekNumber: number,
     event: React.MouseEvent<HTMLDivElement>,
   ) => {
+    let enabledWeekDay = new Date(day);
+
+    for (let i = 0; i < 7; i++) {
+      const processingDay = new Date(day);
+      processingDay.setDate(processingDay.getDate() + i);
+
+      const isEnabled = !this.isDisabled(processingDay);
+
+      if (isEnabled) {
+        enabledWeekDay = processingDay;
+        break;
+      }
+    }
+
     if (typeof this.props.onWeekSelect === "function") {
-      this.props.onWeekSelect(day, weekNumber, event);
+      this.props.onWeekSelect(enabledWeekDay, weekNumber, event);
     }
     if (this.props.showWeekPicker) {
-      this.handleDayClick(day, event);
+      this.handleDayClick(enabledWeekDay, event);
     }
     if (
       this.props.shouldCloseOnSelect ??


Test patch:
diff --git a/src/test/week_picker_test.test.tsx b/src/test/week_picker_test.test.tsx
index 1320e19b..76b3f2a6 100644
--- a/src/test/week_picker_test.test.tsx
+++ b/src/test/week_picker_test.test.tsx
@@ -33,4 +33,63 @@ describe("WeekPicker", () => {
     fireEvent.click(weekNumber ?? new HTMLElement());
     expect(onChangeSpy).toHaveBeenCalled();
   });
+
+  it("should change the week with few disabled dates (not all) when clicked on any week number in the picker", () => {
+    const onChangeSpy = jest.fn();
+    const { container } = render(
+      <DatePicker
+        selected={new Date("2024-01-01")}
+        onChange={onChangeSpy}
+        showWeekPicker
+        showWeekNumbers
+        excludeDateIntervals={[
+          { start: new Date("2024/01/07"), end: new Date("2024/01/11") },
+        ]}
+      />,
+    );
+
+    const input = container.querySelector("input")!;
+    expect(input).not.toBeNull();
+
+    fireEvent.focus(input);
+    const weekNumber = container.querySelector(
+      '.react-datepicker__week-number[aria-label="week  1"]',
+    )!;
+    expect(weekNumber).not.toBeNull();
+    fireEvent.click(weekNumber);
+
+    expect(onChangeSpy).toHaveBeenCalledTimes(1);
+
+    const selectedDate = onChangeSpy.mock.calls[0][0];
+    expect(selectedDate.getFullYear()).toBe(2024);
+    expect(selectedDate.getMonth()).toBe(0);
+    expect(selectedDate.getDate()).toBe(12);
+  });
+
+  it("should not change the week with all the dates in a selected week is disabled", () => {
+    const onChangeSpy = jest.fn();
+    const { container } = render(
+      <DatePicker
+        selected={new Date("2024-01-01")}
+        onChange={onChangeSpy}
+        showWeekPicker
+        showWeekNumbers
+        excludeDateIntervals={[
+          { start: new Date("2024/01/07"), end: new Date("2024/01/13") },
+        ]}
+      />,
+    );
+
+    const input = container.querySelector("input")!;
+    expect(input).not.toBeNull();
+
+    fireEvent.focus(input);
+    const weekNumber = container.querySelector(
+      '.react-datepicker__week-number[aria-label="week  1"]',
+    )!;
+    expect(weekNumber).not.toBeNull();
+    fireEvent.click(weekNumber);
+
+    expect(onChangeSpy).not.toHaveBeenCalled();
+  });
 });