Skip to main content

Localization

DayPicker provides various options to customize the calendar for different languages and regions.

Prop NameTypeDescription
localeLocaleSet the locale. Default is en-US.
weekStartsOn1 | 2 | 3 | 4 | 5 | 6 | 7Change the first day of the week.
firstWeekContainsDate1 | 4Configure the first date in the first week of the year.
timeZonestringThe time zone (IANA or UTC offset) to use in the calendar.
ISOWeekbooleanSwitch to ISO Week Dates.
broadcastCalendarbooleanSwitch to the US Broadcast Calendar.
jalalibooleanSwitch to the Jalali calendar.

Setting the Locale​

To change the default en-US to another locale, import a locale object from react-day-picker/locale and pass it to thelocale prop.

// import the locale object
import { es } from "react-day-picker/locale";

// use the locale object
<DayPicker locale={es} />;
Customizing the Locale

You can customize the locale by passing an object with the desired translations. Use the defaultLocale object for the default translation values.

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

<DayPicker
  locale={{
    localize: {
      ...defaultLocale.localize,
      day: (day) => "custom-localized-day"
    }
  }}
  month={new Date(2023, 0, 1)}
  mode="single"
/>;

Changing the Time Zone​

See Time Zone docs for more information.

Localization Options​

First Date of the Week​

Use the weekStartsOn prop to set the first day of the week.

<DayPicker weekStartsOn={0} /> // Start the week on Sunday

First Week Contains Date​

The firstWeekContainsDate prop sets the first day of the year's initial week, which is used to calculate week numbers. Acceptable values are 1 for Monday and 4 for Thursday.

For more information, see Week Numbering on Wikipedia and the getWeek function from date-fns.

<DayPicker
  showWeekNumber
  firstWeekContainsDate={1} // First week must contain Monday
/>

ISO Week Dates​

Use the ISOWeek prop to switch to ISO Week Dates instead of the locale setting.

<DayPicker ISOWeek />

Broadcast Calendar​

Switch to the US Broadcast Calendar by setting the broadcastCalendar prop.

In the broadcast calendar, weeks start on Monday and end on Sunday. Each month has either 28 or 35 days.

<DayPicker broadcastCalendar />

Jalali Calendar​

DayPicker supports the Jalali calendar through the date-fns-jalali package. To switch to the Jalali calendar, add date-fns-jalali to your dependencies and import DayPicker from react-day-picker/jalali.

Experimental Feature

Support for the Jalali calendar is an experimental feature. Please report any issues you encounter. Thank you!

1. Install the date-fns-jalali package​

npm install date-fns-jalali

2. Import DayPicker from react-day-picker/jalali​

- import { DayPicker } from 'react-day-picker';
+ import { DayPicker } from 'react-day-picker/jalali';

3. Use DayPicker as usual​

You can set the right-to-left direction and change the locale as needed.

./JalaliCalendar.jsx
import React from "react";

import { DayPicker } from "react-day-picker/jalali";
import { faIR } from "react-day-picker/locale";

export function Jalali() {
  return <DayPicker mode="single" locale={faIR} dir="rtl" />;
}