多语言反应日期选择器

Question

我正在尝试翻译组件 React DatePicker。但是，我在尝试执行此操作时遇到错误。

到目前为止我的代码：

import DatePicker, { registerLocale } from 'react-datepicker';

const MONTHSDATE = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
const DAYSDATE = ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'];

registerLocale('ptBR', {
        localize: {
            month: n => MONTHSDATE[n],
            day: n => DAYSDATE[n]
        },
        formatLong: {}
    });
    

<DatePicker
    selected={realizedDateFrom}
    onChange={(date) => setRealizedDateFrom(date)}
    placeholderText={translate.t("activity_report_realized_from")}
    className="MuiInputBase-root MuiFilledInput-root activity-report-datepicker"
    dateFormat={'dd/MM/yyyy'}
    showMonthDropdown
    showYearDropdown
    formatWeekDay={nameOfDay => nameOfDay.substr(0, 3)}
    locale={translate.t("datapicker_translate")} //using translate getting word 'ptBR' for portuguese and 'en' for english
/>

当我更改语言时，当我从日历中选择日期时，此代码运行良好...

但是当我尝试从键盘写入/输入时出现此错误

这个组件的源代码是 --> 项目：https://github.com/Hacker0x01/react-datepicker

Answer 1

您可以将date-fns 用于ptBR。 （基本上，错误是因为日历需要的翻译比您编写的要多）。

因此，建议从date-fns 使用它们，例如：

import React from "react";
import DatePicker from "react-datepicker";
import { registerLocale } from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";
import { en, ptBR } from "date-fns/locale";

registerLocale("ptBR", ptBR);
registerLocale("en", en);

export default function App() {
  const [language, setLanguage] = React.useState("ptBR");

  return (
    <div className="App">
      <h3>Change the Language ({language})</h3>
      <DatePicker locale={language} />
      <button onClick={() => setLanguage("ptBr")}>ptBr</button>
      <button onClick={() => setLanguage("en")}>eng</button>
    </div>
  );
}

示例在 CodeSandbox 上运行：https://codesandbox.io/s/empty-browser-yfvg7?file=/src/App.js