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, make sure to use the TZDate object exported by react-day-picker instead of the native Date object. For more information, refer to the date-fns doc.

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) // Make sure you use `TZDate` instead of `Date`
  );
  return (
    <DayPicker
      mode="single"
      timeZone={timeZone}
      selected={selected}
      onSelect={setSelected}
    />
  );
}