Localization with moment.js
To localize the calendar with moment.js:
- make sure moment is included in your dependencies
- make sure the required moment's locale data is loaded
- import
localeUtils
fromreact-day-picker/moment
and pass it to thelocaleUtils
props - use the
locale
prop to pass the current locale
Example
The following component shows four day pickers: english, japanese, arabic and italian.
import React from "react";
import DayPicker from "react-day-picker";
// Use this util to format the calendar values according to the
// selected locale with moment.js
import { localeUtils } 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";
function LocalizedExample() {
return (
<div>
<p>English</p>
<DayPicker localeUtils={ localeUtils } locale="en" />
<p>Japanese</p>
<DayPicker localeUtils={ localeUtils } locale="jp" />
<p>Arabic</p>
<DayPicker localeUtils={ localeUtils } locale="ar" />
<p>Italian</p>
<DayPicker localeUtils={ localeUtils } locale="it" />
</div>
);
}