Skip to content

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

@Hasan-Mir

Description

@Hasan-Mir

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions