react-day-picker icon indicating copy to clipboard operation
react-day-picker copied to clipboard

`timeZone` prop breaks Persian calendar rendering for old years (e.g. 1313) in `Asia/Tehran`

Open Hasan-Mir opened this issue 2 months ago • 2 comments

1. When using the timeZone prop with the Persian calendar, DayPicker fails to render correctly for old years (for example, year "1313" in the Asia/Tehran timezone). The calendar grid and month view disappear or display incorrectly.

[1] To reproduce

  1. Go to https://daypicker.dev/playground

  2. Set Caption LayoutDropdown

  3. Set Calendarpersian

  4. Set Time ZoneAsia/Tehran

    • (If Asia/Tehran is not available, set your operating system timezone to Asia/Tehran and refresh the page)
  5. Select 1313 (or another old year) from the year selector

  6. Alternatively, open this direct link: https://daypicker.dev/playground?captionLayout=dropdown&dir=rtl&calendar=persian&locale=fa-IR&timeZone=Asia/Tehran

Expected Behavior

The calendar should correctly display all months and days for the selected year, regardless of how old the year is.

Actual Behavior

For older years (e.g. 1313), the calendar UI breaks — months and days are not rendered properly.

Screenshots

Image Image

2. It also behaves incorrectly during DST transitions. For example, for 1401-01-02, as shown in the screenshots, the second day is displayed as 1 instead of 2, which is incorrect. Additionally, it throws a React “duplicate key” error. This happens because the @date-fns/tz doesn't handle the DST transitions correctly. A potential solution would be to use Luxon, which provides more reliable time zone and DST handling

[2] To reproduce

  1. Go to https://daypicker.dev/playground

  2. Set Caption LayoutDropdown

  3. Set Calendarpersian

  4. Set Time ZoneAsia/Tehran

    • (If Asia/Tehran is not available, set your operating system timezone to Asia/Tehran and refresh the page)
  5. Select 1401 from the year selector and select "فروردین" from the month selector.

Expected Behavior

The calendar should correctly display all days for the selected year and month, and properly handle DST transitions.

Actual Behavior

The calendar shows duplicate days (day 1 is repeated because the second day falls on a DST transition).

Screenshots

Image

Environment

  • Library version: 9.11.1
  • Browser: Chrome 141
  • OS / Timezone: Asia/Tehran

Hasan-Mir avatar Oct 14 '25 13:10 Hasan-Mir

I also got this error Image

binhtq1 avatar Nov 19 '25 02:11 binhtq1

Thanks for the bug reports. I am investigating the time zone issues and will provide an update with the findings.

gpbl avatar Nov 19 '25 10:11 gpbl