Skip to content

Commit

Permalink
🐛 Fix the click of week numbers when the first day of the week is not…
Browse files Browse the repository at this point in the history
… enabled

Closes Hacker0x01#4902
  • Loading branch information
Balaji Sridharan committed Jun 17, 2024
1 parent c1258d3 commit f09d92d
Show file tree
Hide file tree
Showing 2 changed files with 93 additions and 3 deletions.
59 changes: 59 additions & 0 deletions src/test/week_picker_test.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});
37 changes: 34 additions & 3 deletions src/week.tsx
Original file line number Diff line number Diff line change
@@ -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";

Expand Down Expand Up @@ -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>,
Expand All @@ -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 ??
Expand Down

0 comments on commit f09d92d

Please sign in to comment.