Time Zones

Use the timeZone prop to set the time zone for the calendar.

Prop Name	Type	Description
timeZone	string	The time zone to use in the calendar.

The time zone can be specified as either an IANA time zone identifier or a UTC offset.

<DayPicker timeZone="UTC" /> // Use Coordinated Universal Time
<DayPicker timeZone="Pacific/Kiritimati" /> // Use Line Islands Time
<DayPicker timeZone="+02:00" /> // Use UTC+2

Working with Time-Zoned Dates

When working with time zones, use the TZDate object exported by react-day-picker instead of the native Date object. This ensures proper handling of time zones. For more information, refer to the date-fns documentation.

import { DayPicker, TZDate } from "react-day-picker";

export function TimeZone() {
  const timeZone = "America/New_York";
  const [selected, setSelected] = useState<Date | undefined>(
    new TZDate(2024, 12, 10, timeZone), // Use `TZDate` instead of `Date`
  );
  return (
    <DayPicker
      mode="single"
      timeZone={timeZone}
      selected={selected}
      onSelect={setSelected}
    />
  );
}