fix: parse holiday date strings as local time to prevent timezone shift

When holiday dates are provided as ISO date strings (YYYY-MM-DD), the
previous implementation used `new Date(string)` which parses them as UTC
midnight. This caused holidays to display on the wrong day in timezones
west of UTC.

For example, "2025-01-01" would be parsed as 2025-01-01T00:00:00.000Z,
which when formatted in PST (UTC-8) becomes December 31st, 2024.

This fix introduces `parseHolidayDateString()` which parses ISO date
strings by extracting year/month/day components and creating a Date
object in local time, ensuring holidays display on the intended date
regardless of timezone.

Fixes #6105

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: martijnrusschen

src/date_utils.ts

@@ -1329,6 +1329,39 @@ export function arraysAreEqual<T>(array1: T[], array2: T[]): boolean {
   return array1.every((value, index) => value === array2[index]);
 }
 
+/**
+ * Parses an ISO date string (YYYY-MM-DD) as local midnight.
+ *
+ * This is necessary because `new Date("YYYY-MM-DD")` parses the date as UTC midnight,
+ * which can cause the date to shift to the previous day when displayed in timezones
+ * west of UTC. For example, "2024-01-15" parsed as UTC midnight becomes
+ * January 14th at 4pm in PST (UTC-8).
+ *
+ * @param dateString - An ISO date string in YYYY-MM-DD format
+ * @returns A Date object representing local midnight, or null if invalid
+ */
+export function parseHolidayDateString(dateString: string): Date | null {
+  const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
+  if (!dateRegex.test(dateString)) {
+    return null;
+  }
+
+  const [year, month, day] = dateString.split("-").map(Number);
+  if (
+    year === undefined ||
+    month === undefined ||
+    day === undefined ||
+    isNaN(year) ||
+    isNaN(month) ||
+    isNaN(day)
+  ) {
+    return null;
+  }
+
+  const date = new Date(year, month - 1, day);
+  return isValidDate(date) ? date : null;
+}
+
 export interface HolidayItem {
   date: Date;
   holidayName: string;

src/index.tsx

@@ -45,6 +45,7 @@ import {
   isYearDisabled,
   safeMultipleDatesFormat,
   getHolidaysMap,
+  parseHolidayDateString,
   isDateBefore,
   getStartOfDay,
   getEndOfDay,
@@ -410,10 +411,13 @@ export class DatePicker extends Component<DatePickerProps, DatePickerState> {
           : newDate();
 
   // Convert the date from string format to standard Date format
+  // Uses parseHolidayDateString to parse ISO date strings (YYYY-MM-DD) as local
+  // midnight instead of UTC midnight, preventing dates from shifting to the
+  // previous day 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 = parseHolidayDateString(holiday.date);
+      if (!date) {
         return accumulator;
       }
 

src/test/date_utils_test.test.ts

@@ -50,6 +50,7 @@ import {
   safeDateFormat,
   getHolidaysMap,
   arraysAreEqual,
+  parseHolidayDateString,
   startOfMinute,
   isDateBefore,
   getMidnightDate,
@@ -1436,6 +1437,60 @@ describe("date_utils", () => {
     });
   });
 
+  describe("parseHolidayDateString", () => {
+    it("should parse a valid ISO date string as local midnight", () => {
+      const result = parseHolidayDateString("2024-01-15");
+      expect(result).not.toBeNull();
+      expect(result!.getFullYear()).toBe(2024);
+      expect(result!.getMonth()).toBe(0); // January is 0
+      expect(result!.getDate()).toBe(15);
+      expect(result!.getHours()).toBe(0);
+      expect(result!.getMinutes()).toBe(0);
+    });
+
+    it("should parse date correctly regardless of how new Date() would parse it", () => {
+      // This test documents the bug that this function fixes.
+      // new Date("2024-01-15") parses as UTC midnight, which can shift
+      // to a different day in western timezones.
+      const dateString = "2024-01-15";
+      const result = parseHolidayDateString(dateString);
+
+      // The result should always represent January 15th in local time
+      expect(result!.getDate()).toBe(15);
+      expect(result!.getMonth()).toBe(0);
+      expect(result!.getFullYear()).toBe(2024);
+    });
+
+    it("should return null for invalid date format", () => {
+      expect(parseHolidayDateString("invalid-date")).toBeNull();
+      expect(parseHolidayDateString("2024/01/15")).toBeNull();
+      expect(parseHolidayDateString("01-15-2024")).toBeNull();
+      expect(parseHolidayDateString("2024-1-15")).toBeNull();
+      expect(parseHolidayDateString("2024-01-5")).toBeNull();
+    });
+
+    it("should return null for empty string", () => {
+      expect(parseHolidayDateString("")).toBeNull();
+    });
+
+    it("should handle edge dates correctly", () => {
+      // New Year's Day
+      const newYear = parseHolidayDateString("2024-01-01");
+      expect(newYear!.getDate()).toBe(1);
+      expect(newYear!.getMonth()).toBe(0);
+
+      // New Year's Eve
+      const newYearEve = parseHolidayDateString("2024-12-31");
+      expect(newYearEve!.getDate()).toBe(31);
+      expect(newYearEve!.getMonth()).toBe(11);
+
+      // Leap year date
+      const leapDay = parseHolidayDateString("2024-02-29");
+      expect(leapDay!.getDate()).toBe(29);
+      expect(leapDay!.getMonth()).toBe(1);
+    });
+  });
+
   describe("isSameMinute", () => {
     it("should return true if two dates are within the same minute", () => {
       const d1 = new Date(2020, 10, 10, 10, 10, 10); // Nov 10, 2020 10:10:10

src/test/datepicker_test.test.tsx

@@ -5461,6 +5461,41 @@ 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 in all timezones.
+      // The bug was that "2024-01-15" parsed as UTC midnight would display
+      // on January 14th for users in timezones west of UTC.
+      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
+      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
+      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();