Home page

Localization

react-day-picker can be localized into any language (English being the default). You can either:

  • use the localization props – see the example below
  • use moment.js translations strings, in case you are already including it in your project

For more advanced options, such as changing how days and captions are displayed, see advanced localization.

Localization props

Use locale, weekdaysLong andweekdaysShort props with your own translation strings. Use firstDayOfWeek to set the first day of the week.

Example

The following example translates the calendar in Italian:

Code

import React from 'react';
import DayPicker from 'react-day-picker';
import 'react-day-picker/lib/style.css';

const MONTHS = [
  'Gennaio',
  'Febbraio',
  'Marzo',
  'Aprile',
  'Maggio',
  'Giugno',
  'Luglio',
  'Agosto',
  'Settembre',
  'Ottobre',
  'Novembre',
  'Dicembre',
];
const WEEKDAYS_LONG = [
  'Domenica',
  'Lunedì',
  'Martedì',
  'Mercoledì',
  'Giovedì',
  'Venerdì',
  'Sabato',
];
const WEEKDAYS_SHORT = ['Do', 'Lu', 'Ma', 'Me', 'Gi', 'Ve', 'Sa'];

export default function Italian() {
  return (
    <DayPicker
      locale="it"
      months={MONTHS}
      weekdaysLong={WEEKDAYS_LONG}
      weekdaysShort={WEEKDAYS_SHORT}
      firstDayOfWeek={1}
    />
  );
}

Result

Marzo 2021
Lu
Ma
Me
Gi
Ve
Sa
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

Localization with moment.js

If you already include moment.js in your dependencies, you may find convenient to use moment’s translation strings.

How to use moment.js to localize the calendar

  1. make sure moment is included in your dependencies
  2. make sure the required moment’s locale data is available when rendering react-day-picker
  3. import MomentLocaleUtils from react-day-picker/moment and pass it to the localeUtils props
  4. use the locale prop to set the locale in react-day-picker

Example

The following example shows how to localize the calendar in English, Japanese, Arabic and Italian:

Code

import React from 'react';
import DayPicker from 'react-day-picker';
import 'react-day-picker/lib/style.css';

// Include the locale utils designed for moment
import MomentLocaleUtils from 'react-day-picker/moment';

// Make sure moment.js has the required locale data
import 'moment/locale/ja';
import 'moment/locale/ar';
import 'moment/locale/it';

export default class LocalizedExample extends React.Component {
  constructor(props) {
    super(props);
    this.handleSelectChange = this.handleSelectChange.bind(this);
    this.state = {
      locale: 'en',
    };
  }

  handleSelectChange(e) {
    this.setState({
      locale: e.target.value,
    });
  }

  render() {
    return (
      <div>
        <p>
          <select onChange={this.handleSelectChange}>
            <option value="en">English</option>
            <option value="ja">Japanese</option>
            <option value="ar">Arabic</option>
            <option value="it">Italian</option>
          </select>
        </p>
        <DayPicker localeUtils={MomentLocaleUtils} locale={this.state.locale} />
      </div>
    );
  }
}

Result

March 2021
Su
Mo
Tu
We
Th
Fr
Sa
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

Advanced localization

Internally, react-day-picker uses LocaleUtils, a set of formatting functions. You can overwrite its behavior by passing your own custom functions to the localeUtils props.

Code

import React from 'react';
import DayPicker from 'react-day-picker';
import 'react-day-picker/lib/style.css';

const WEEKDAYS_LONG = {
  en: [
    'Sunday',
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday',
  ],
  it: [
    'Domenica',
    'Lunedì',
    'Martedì',
    'Mercoledì',
    'Giovedì',
    'Venerdì',
    'Sabato',
  ],
};
const WEEKDAYS_SHORT = {
  en: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
  it: ['D', 'L', 'M', 'M', 'G', 'V', 'S'],
};
const MONTHS = {
  en: [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December',
  ],
  it: [
    'Gennaio',
    'Febbraio',
    'Marzo',
    'Aprile',
    'Maggio',
    'Giugno',
    'Luglio',
    'Agosto',
    'Settembre',
    'Ottobre',
    'Novembre',
    'Dicembre',
  ],
};

const FIRST_DAY = {
  en: 0,
  it: 1, // Use Monday as first day of the week
};

function formatDay(d, locale = 'en') {
  return `${WEEKDAYS_LONG[locale][d.getDay()]}, ${d.getDate()} ${
    MONTHS[locale][d.getMonth()]
  } ${d.getFullYear()}`;
}

function formatMonthTitle(d, locale = 'en') {
  return `${MONTHS[locale][d.getMonth()]} ${d.getFullYear()}`;
}

function formatWeekdayShort(i, locale) {
  return WEEKDAYS_SHORT[locale][i];
}

function formatWeekdayLong(i, locale) {
  return WEEKDAYS_SHORT[locale][i];
}

function getFirstDayOfWeek(locale) {
  return FIRST_DAY[locale];
}

const localeUtils = {
  formatDay,
  formatMonthTitle,
  formatWeekdayShort,
  formatWeekdayLong,
  getFirstDayOfWeek,
};

export default function MyComponent() {
  return <DayPicker locale="it" localeUtils={localeUtils} />;
}

Result

Marzo 2021
L
M
M
G
V
S
D
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