Merge pull request #4903 from qburst/issue-4902/fix/disabled-showWeekNumbers

Fix #4902: 🐛 Fix the click of week numbers when the first day of the week is not enabled

Author: martijnrusschen

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();
+  });
 });

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 ??