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.
noonSafe	boolean	Experimental (see below). Keep calendar math at noon in the time zone to avoid historical drift and use when your time zone shows duplicated/missing days.

<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.`
      }
    />
  );
}

Historical time zones with second offsets

Some historical time zones use offsets with seconds (for example Asia/Dubai in 1900 is +03:41:12). JavaScript Date and date-fns round offsets to minutes, which can push midnight calculations into the previous day. Set noonSafe to keep calendar math at 12:00 in the chosen time zone so the date never drifts.

const timeZone = "Asia/Dubai";

<DayPicker timeZone={timeZone} weekStartsOn={1} noonSafe />;

This override is optional and only needed when you render months that include offsets with seconds and want to avoid duplicate or missing days in the grid. Use it when you notice time-zone related glitches such as missing days, duplicate days, or unexpected week padding.