CODEWITHSUNDEEP
reactjsreact-day-picker
Malachi Waisman
Malachi Waisman

Reputation: 482

change language in react-day-picker DayPickerInput component

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?

Upvotes: 6

Views: 3123

Answers (2)

WayneC
WayneC

Reputation: 5740

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

Upvotes: 3

bennygenel
bennygenel

Reputation: 24660

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

Upvotes: 4

Related Questions