0
131
VistasSelector de fecha de reacción en varios idiomas
Estoy tratando de traducir el componente React DatePicker. Pero, estoy recibiendo un error al intentar hacer esto.
Mi código hasta ahora:
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 />Cuando cambio el idioma, este código funciona bien solo cuando elijo la fecha del calendario...
Pero cuando trato de escribir/ingresar desde el teclado me sale este error
El código fuente de este componente es --> Proyecto: https://github.com/Hacker0x01/react-datepicker
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Puede usar date-fns fns para ptBR . (Básicamente, el error se debe a que el calendario necesita más traducciones que el que escribes).
Entonces, lo recomendado es usarlos desde date-fns , un ejemplo sería:
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> ); }El ejemplo se ejecuta en CodeSandbox: https://codesandbox.io/s/empty-browser-yfvg7?file=/src/App.js
·
Juan Pablo Isaza
Denunciar
Responde la pregunta