I use DayPickerInput component to date fields on form, and I want to display the days and months in a different language (Hebrew, for that matter). In the API of the library I found a very simple way to change a language for the basic component (DayPicker), but as far as I understand this way does not work for DayPickerInput.
It manages to change the language of the selected date (in the field itself), but not the display in the picker.
for example,
import React from "react";
import ReactDOM from "react-dom";
import DayPicker from "react-day-picker";
import MomentLocaleUtils from "react-day-picker/moment";
import "react-day-picker/lib/style.css";
import "moment/locale/he";
function LocalizedExample() {
return (
<div>
<p>Hebrew</p>
<DayPicker localeUtils={MomentLocaleUtils} locale="he" />
</div>
);
}
ReactDOM.render(<LocalizedExample />, document.getElementById("root"));
With this code the language changes as desired, but with the following change (in the third row):
import DayPicker from "react-day-picker/DayPickerInput";
The language remains English.
Is there a way to do this?
DayPickerInput
has a prop called dayPickerProps
. I think you need to use that.
Example
import { DayPickerInput } from 'react-day-picker';
<DayPickerInput dayPickerProps={{localeUtils: MomentLocaleUtils, locale:"he"}} />