Estoy usando el selector de fecha MUI (v5) para la entrada de cumpleaños del usuario. Lo he localizado al idioma alemán. Entonces la entrada es DD.MM.YYYY .
Ahora, muchos usuarios alemanes están usando un valor de año corto como DD.MM.YY Pero esta entrada daría como resultado valores incorrectos:
La entrada 05.01.20 me da Sun Jan 05 0020 00:00:00 GMT+0053 . Esto me lleva a dos problemas:
80 ) deberían usarse como 1980 y 18 deberían dar como resultado 2018 . Para mí, el segundo punto sería la mejor solución, por lo que tendría que establecer la entrada en general en el formato DD.MM.YY y manejar esas entradas como se describe. Pero, ¿cómo cambio el formato de entrada del DatePicker?
import React from 'react' import AdapterDateFns from '@mui/lab/AdapterDateFns' import LocalizationProvider from '@mui/lab/LocalizationProvider' import DatePicker from '@mui/lab/DatePicker' import deLocale from 'date-fns/locale/de' import { toDate, isValid } from 'date-fns' const Component = () => { const [birthday, setBirthday] = React.useState<Date>(null) const handleDateChange = (value: any) => { console.log(isValid(value)) setBirthday(toDate(value)) } return ( <LocalizationProvider dateAdapter={AdapterDateFns} locale={deLocale}> <DatePicker disableFuture mask="__.__.____" value={birthday} onChange={handleDateChange} renderInput={(params) => ( <TextField {...params} /> )} /> </LocalizationProvider> ) }Siempre es una cuestión de equilibrio para este tipo de problemas. ¿Cuál sería el más eficiente y práctico tanto para el usuario final como para el desarrollador?
Siendo francés, entiendo lo de los años de dos dígitos, pero en mi opinión, no vale la pena la molestia.
Sí, el usuario final tendría que ingresar 4 dígitos en lugar de 2 (eso es como 0,5 s de su tiempo de todos modos), pero entonces no tiene que pasar 2 o 3 horas (o más) para tratar de manejar todo el casos específicos y correr el riesgo de guardar fechas no válidas. Por ejemplo, ¿qué sucede si el usuario ingresa 60 (que puede ser un valor "futuro", 2060, así como un valor antiguo, 1960)?
Dicho esto, probablemente podría lograr lo que desea modificando el formato de entrada de un DatePicker a través de la propiedad inputFormat , creo. Sin embargo, tendrá que probar las cosas, ya que los documentos sobre este accesorio no son muy... extensos.
Para la solución 1, hay validadores dentro de DatePicker, por ejemplo, todos los años anteriores a 1900 no son válidos. Creo que también puede cambiar los validadores para que se ajusten a sus necesidades.
EDITAR: configuré un entorno mínimo para jugar con su código y se me ocurrió una solución (algo a medio cocinar).
Como puedes ver en este CodeSandBox , podemos aprovechar el método getYear para decirnos si el año es posterior a 1900 o no. Devuelve la diferencia entre el año 1900 y la entrada. Entonces, si ingresamos 199, por ejemplo, devolverá -1701 . Por el contrario, si ingresamos, por ejemplo, 2021, devolverá 121 . Eso hace nuestra primera validación.
También necesitamos manejar otros casos proporcionando a DatePicker nuestra propia función onError .
Tenga en cuenta que para las fechas con el año > 1900 y <= 1911, la hora del meridiano de Greenwich parece rota. (+9)
Finalmente, si realmente queremos una fecha con formato de 2 dígitos y SOLO para fines de visualización (o para almacenar una fecha de tipo cadena), podemos aprovechar el format de la función de date-fns .