es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Solo se permite introducir años de dos dígitos en el selector de fechas MUI (v5).

04 Aug, 2023 Programación

Estoy usando el Datepicker de MUI (v5) para la entrada de la fecha de nacimiento del usuario. Lo he localizado al idioma alemán, por lo que la entrada es “DD.MM.AAAA”.

Ahora muchos usuarios alemanes están utilizando un valor de año corto como “DD.MM.AA”. Pero esta entrada daría valores incorrectos:

La entrada “05.01.20” me da “Dom ene 05 0020 00:00:00 GMT+0053”. Esto me lleva a dos problemas:

  1. ¿Cómo puedo ‘forzar’ al usuario a ingresar valores de año de cuatro dígitos? Escribir dos dígitos da como resultado una fecha válida (pero inútil).
  2. O (y esto sería mejor) ¿cómo puedo verificar y manejar los valores de año de dos dígitos? Creo que los valores futuros (“80”) deberían usarse como “1980” y “18” debería dar como resultado “​​2018”.

Para mí, el segundo punto sería la mejor solución, por lo que tendría que establecer el formato de entrada en general como “DD.MM.AA” y manejar esas entradas como se describe. Pero, ¿cómo cambio el formato de entrada del Datepicker?

“`javascript
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="">(null)
const handleDateChange = (value: any) => {
console.log(isValid(value))
setBirthday(toDate(value))
}

<pre><code>return (
<localizationprovider dateadapter="{AdapterDateFns}" locale="{deLocale}">
<datepicker disablefuture="" mask="__.__.____" value="{birthday}" onchange="{handleDateChange}" renderinput="{(params)" ==""> (
<textfield {…params}=""></textfield>
)}
/>
</datepicker></localizationprovider>
)
</code></pre>

}
“`

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para manejar valores de año de dos dígitos en el Datepicker de MUI, puedes actualizar la máscara a "__.__.__" y agregar una función de validación personalizada para verificar los años de dos dígitos y convertirlos en años de cuatro dígitos. Puedes hacer esto modificando la función handleDateChange:

    const handleDateChange = (value: any) => {
  const date = toDate(value, { awareOfUnicodeTokens: true });
  if (isValid(date)) {
    if (value.match(/^[0-9]{2}\.[0-9]{2}\.[0-9]{2}$/)) {
      const year = date.getFullYear();
      const century = Math.floor(new Date().getFullYear() / 100) * 100;
      if (year > new Date().getFullYear() % 100) {
        date.setFullYear(century + year - 100);
      } else {
        date.setFullYear(century + year);
      }
    }
    setBirthday(date);
  }
};

    Esta función verifica si la entrada coincide con el formato "DD.MM.YY", y si es así, convierte el año en un año de cuatro dígitos según la fecha actual. Si el año es mayor que el año de dos dígitos actual, resta 100 para obtener el siglo correcto.

    Para cambiar el formato de entrada del DatePicker, puedes actualizar la propiedad mask a "__.__.__" como se muestra arriba. Esto permitirá a los usuarios ingresar un valor de año de dos dígitos, y la función de validación personalizada lo convertirá en un año de cuatro dígitos según sea necesario.

Comments are closed.