Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -410,10 +410,12 @@ export class DatePicker extends Component<DatePickerProps, DatePickerState> {
: newDate();

// Convert the date from string format to standard Date format
// Uses parseDate with ISO format to parse as local time, preventing
// dates from shifting in timezones west of UTC. See issue #6105.
modifyHolidays = () =>
this.props.holidays?.reduce<HolidayItem[]>((accumulator, holiday) => {
const date = new Date(holiday.date);
if (!isValid(date)) {
const date = parseDate(holiday.date, "yyyy-MM-dd", undefined, false);
if (!date) {
return accumulator;
}

Expand Down
34 changes: 34 additions & 0 deletions src/test/datepicker_test.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5461,6 +5461,40 @@ describe("DatePicker", () => {
expect(container.querySelector(".react-datepicker")).not.toBeNull();
});

it("should apply holiday class to correct date regardless of timezone (issue #6105)", () => {
// This test verifies that holidays specified as ISO date strings (YYYY-MM-DD)
// are displayed on the correct date. The bug was that new Date("YYYY-MM-DD")
// parses as UTC midnight, causing dates to shift in western timezones.
const holidays = [{ date: "2024-01-15", holidayName: "Test Holiday" }];

const { container } = render(
<DatePicker
selected={new Date(2024, 0, 15)} // January 15, 2024 in local time
onChange={() => {}}
holidays={holidays}
inline
/>,
);

// Find the day element for January 15th and verify it has the holiday class
const jan15 = container.querySelector(
".react-datepicker__day--015:not(.react-datepicker__day--outside-month)",
);
expect(jan15).not.toBeNull();
expect(jan15?.classList.contains("react-datepicker__day--holidays")).toBe(
true,
);

// Verify January 14th does NOT have the holiday class (the bug would show it here)
const jan14 = container.querySelector(
".react-datepicker__day--014:not(.react-datepicker__day--outside-month)",
);
expect(jan14).not.toBeNull();
expect(jan14?.classList.contains("react-datepicker__day--holidays")).toBe(
false,
);
});

it("should handle deferFocusInput and cancelFocusInput", () => {
jest.useFakeTimers();

Expand Down
Loading