在 react-day-picker 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"));

在 react-day-picker DayPickerInput 组件中更改语言

change language in react-day-picker DayPickerInput component

reactjs

react-day-picker