我正在尝试翻译 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
最佳答案
您可以将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
关于javascript - 多语言 React DatePicker,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69306196/