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.

Configurando el formato “DD/MM/YYYY” en MUI.

14 Jun, 2023 Programación

En mi formulario de MUI estoy usando DatePicker para seleccionar fechas de partida y regreso de usuarios. Pero cuando uso .toLocaleDateString() establece mis fechas en formato mm-dd-yyyy. Pero quería establecerlas en el formato dd-mm-yyyy. Para eso he pasado 'en-GB' como parámetro en .toLocaleDateString(). Pero en TextField del DatePicker muestra un borde rojo como este y la fecha predefinida (del estado) también desaparece. Sin el parámetro muestra esto que es el formato mm-dd-yyyy. De las preguntas similares anteriores, incluso lo intenté a través del paquete moment y establecí la variable dt como moment(new Date()).format("DD/MM/YYYY") pero aún muestra un borde rojo alrededor del campo de texto. Sé que esta pregunta se hizo muchas veces antes y las revisé todas y no obtuve ninguna solución.

Selector de fecha

const dt = new Date().toLocaleDateString();
console.log(dt);
const [formData, setFormData] = useState({
  from: "",
  to: "",
  depart: dt,
  return: dt,
  noOfPassenger: 1,
  tripType: "Return",
});

{/* Componente de la aplicación  */}
  <div className="dates">
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DatePicker
        label="Fecha de partida"
        disablePast
        onChange={(e) =>
          setFormData({
            ...formData,
            depart: e.toLocaleDateString(),
          })
        }
        value={formData.depart}
        renderInput={(params) => <TextField {...params} required />}
      />
    </LocalizationProvider>
  </div>
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema parece estar relacionado con la introducción del parámetro 'en-GB' en el método toLocaleDateString(). El borde rojo en el componente DatePicker indica que hay un error con la entrada.

    Una solución podría ser usar el método format() de la biblioteca date-fns, que proporciona opciones flexibles de formato de fecha.

    Primero, necesitará instalar la biblioteca date-fns:

    npm install date-fns

    Luego, puede importarla en su componente y usarla para formatear las cadenas de fecha:

    import { format } from 'date-fns';

// ...

const formatDate = (date) => format(date, 'dd-MM-yyyy');

// ...

<datepicker label="Fecha de salida" disablepast="" value="{formData.depart}" onchange="{(date)" =="">
    setFormData({
      ...formData,
      depart: formatDate(date),
    })
  }
  renderInput={(params) => <textfield {...params}="" required=""></textfield>}
/>

    Esto formateará la fecha como dd-MM-yyyy, que es lo que desea.

    Tenga en cuenta que también podría usar formatDate para formatear las cadenas de fecha iniciales cuando establezca el estado inicial:

    const today = new Date();
const initialDate = formatDate(today);

const [formData, setFormData] = useState({
  from: "",
  to: "",
  depart: initialDate,
  return: initialDate,
  noOfPassenger: 1,
  tripType: "Return",
});

    Esto debería evitar el problema del borde rojo, ya que el componente DatePicker recibirá cadenas de fecha válidas formateadas en consecuencia.

Comments are closed.