Setting the Time Zone

DayPicker can render dates in a specific time zone so that what users see matches their local time or a time zone you explicitly choose. Internally, this is handled via the time zone support in date-fns.

By default, DayPicker uses the browser’s local time zone. You can override this with the timeZone prop.

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

Prop Name	Type	Description
timeZone	string	The IANA time zone to use when rendering the calendar.

<DayPicker timeZone="UTC" /> // Coordinated Universal Time
<DayPicker timeZone="Pacific/Honolulu" /> // US Hawaii Time
<DayPicker timeZone="Europe/Paris" /> // Central European Time
<DayPicker timeZone="UTC+2" /> // UTC plus 2 hours
<DayPicker timeZone="UTC-5" /> // UTC minus 5 hours

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. TZDate ensures your user interface always reads and writes dates in the time zone you specify.

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

export function TimeZone() {
  const timeZone = "Pacific/Honolulu";
  const [selected, setSelected] = useState<Date | undefined>(
    TZDate.tz(timeZone), // Use `TZDate` instead of `Date`
  );
  return (
    <DayPicker
      mode="single"
      timeZone={timeZone}
      selected={selected}
      onSelect={setSelected}
      footer={
        selected
          ? selected.toString()
          : `Pick a day to see it is in ${timeZone} time zone.`
      }
    />
  );
}