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组件中的语言

2 个答案: