Change the language in the day-user-picker component

Question

I am using the DayPickerInput component for a date on a form, and I want to display days and months in another language (Hebrew, for that matter). In the library API, I found a very simple way to change the language for the base component (DayPicker), but, as I understand it, this method does not work for DayPickerInput.

He manages to change the language of the selected date (in the field itself), but does not display it in the collector.

eg,

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"));

Using this code, the language changes as desired, but with the following change (in the third line):

import DayPicker from "react-day-picker/DayPickerInput";

The language remains English.

Is there any way to do this?

Answer 1

DayPickerInputhas a link called dayPickerProps. I think you need to use this.

Example

import { DayPickerInput } from 'react-day-picker';

<DayPickerInput dayPickerProps={{localeUtils: MomentLocaleUtils, locale:"he"}} />

Answer 2

, locale localeUtils 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"));