Localization

Changing locale

To change the locale, pass to the locale prop a date-fns Locale object.

For example, to localize the calendar in Spanish, import the locale object from date-fns and pass it to the component:

|

import React from 'react';

import { es } from 'date-fns/locale';
import { DayPicker } from 'react-day-picker';

export default function App() {
  return <DayPicker locale={es} />;
}

mayo 2026

lu	ma	mi	ju	vi	sá	do
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

Overriding the first day of the week

Use the weekStartsOn prop to change the first day of the week:

|

import React from 'react';

import { es } from 'date-fns/locale';
import { DayPicker } from 'react-day-picker';

export default function App() {
  return <DayPicker locale={es} weekStartsOn={0} />;
}

mayo 2026

do	lu	ma	mi	ju	vi	sá
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

First week of the year

To override the date in the first week of the year, use firstWeekContainsDate. Use this prop to change the week number calculation according to date-fns getWeek function.

|

import React from 'react';

import { DayPicker } from 'react-day-picker';

export default function App() {
  return (
    <DayPicker
      showWeekNumber
      weekStartsOn={2} // Tuesday as first day of the week
      firstWeekContainsDate={4} // Number the first week of the year from day 4
      formatters={{
        // Add `W` prefix to week number
        formatWeekNumber: (weekNumber) => `W${weekNumber}`
      }}
    />
  );
}

May 2026

	Tu	We	Th	Fr	Sa	Su	Mo
W18				1	2	3	4
W19	5	6	7	8	9	10	11
W20	12	13	14	15	16	17	18
W21	19	20	21	22	23	24	25
W22	26	27	28	29	30	31

Switching to ISO week dates

By default, week numbers and week days follow the DayPicker's locale. Use the ISOWeek prop to switch to ISO week dates.

|

import React from 'react';

import { DayPicker } from 'react-day-picker';

export default function App() {
  return <DayPicker ISOWeek showWeekNumber showOutsideDays />;
}

May 2026

	Mo	Tu	We	Th	Fr	Sa	Su
18	27	28	29	30	1	2	3
19	4	5	6	7	8	9	10
20	11	12	13	14	15	16	17
21	18	19	20	21	22	23	24
22	25	26	27	28	29	30	31

Switching to right-to-left direction

To add right-to-left text direction, set the dir prop to rtl.

|

import React from 'react';

import { arSA } from 'date-fns/locale';
import { DayPicker } from 'react-day-picker';

export default function App() {
  return <DayPicker dir="rtl" locale={arSA} />;
}

مايو 2026

أحد	اثنين	ثلاثاء	أربعاء	خميس	جمعة	سبت
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

Other numbering systems

Use formatters to change the numbering system used in the calendar.

For example, to switch to hindu-arabic using toLocaleString:

|

import React from 'react';

import { format } from 'date-fns';
import { arSA } from 'date-fns/locale';
import {
  DateFormatter,
  DayPicker,
  WeekNumberFormatter
} from 'react-day-picker';

const NU_LOCALE = 'ar-u-nu-arab';

const formatDay: DateFormatter = (day) =>
  day.getDate().toLocaleString(NU_LOCALE);

const formatWeekNumber: WeekNumberFormatter = (weekNumber) => {
  return weekNumber.toLocaleString(NU_LOCALE);
};

const formatCaption: DateFormatter = (date, options) => {
  const y = date.getFullYear().toLocaleString(NU_LOCALE);
  const m = format(date, 'LLLL', { locale: options?.locale });
  return `${m} ${y}`;
};

export default function App() {
  return (
    <DayPicker
      locale={arSA}
      dir="rtl"
      showWeekNumber
      formatters={{ formatDay, formatCaption, formatWeekNumber }}
    />
  );
}

مايو ٢٬٠٢٦

	أحد	اثنين	ثلاثاء	أربعاء	خميس	جمعة	سبت
١٨						١	٢
١٩	٣	٤	٥	٦	٧	٨	٩
٢٠	١٠	١١	١٢	١٣	١٤	١٥	١٦
٢١	١٧	١٨	١٩	٢٠	٢١	٢٢	٢٣
٢٢	٢٤	٢٥	٢٦	٢٧	٢٨	٢٩	٣٠
٢٣	٣١

ARIA labels translations

Use the labels prop to translate the labels used for ARIA.