change language in react-day-picker DayPickerInput component

Question

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?

Answer 1

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

Answer 2

Looks like you need to pass the locale and localeUtils as dayPickerProps:

import "react-day-picker/lib/style.css";

import "moment/locale/he";

function LocalizedExample() {
  const dayPickerProps = {
    localeUtils: MomentLocaleUtils,
    locale: "he"
  }
  return (
    <div>
      <p>Hebrew</p>
      <DayPicker dayPickerProps={dayPickerProps} />
    </div>
  );
}

ReactDOM.render(<LocalizedExample />, document.getElementById("root"));