react日选择器DayPickerInput组件中的更改语言

Question

我使用DayPickerInput组件对表单上的字段进行日期设置，并希望以不同的语言(希伯来语)显示日期和月份。在库的API中，我找到了一种非常简单的方法来更改基本组件(DayPicker)的语言，但据我所知，这种方法并不适用于DayPickerInput。

它设法更改所选日期的语言(在字段本身中)，但不更改选择器中的显示。

例如,

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

使用此代码，语言将按需要进行更改，但将进行以下更改(在第三行)：

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

这门语言仍然是英语。

有办法这样做吗？

Answer 1

DayPickerInput有一个叫做dayPickerProps的道具。我觉得你需要用这个。

示例

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