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} />;
}

octubre 2023

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} />;
}

octubre 2023

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

October 2023

	Tu	We	Th	Fr	Sa	Su	Mo
W39						1	2
W40	3	4	5	6	7	8	9
W41	10	11	12	13	14	15	16
W42	17	18	19	20	21	22	23
W43	24	25	26	27	28	29	30
W44	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 />;
}

October 2023

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

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} />;
}

أكتوبر 2023

أحد	اثنين	ثلاثاء	أربعاء	خميس	جمعة	سبت
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.