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.

  • es.davy.ai/
  • Programación /
  • Almacena la fecha como “yyyy-MM-dd” en Mongoose a través del DatePicker de Material UI.

Almacena la fecha como “yyyy-MM-dd” en Mongoose a través del DatePicker de Material UI.

21 Jul, 2023 Programación

Como no estoy acostumbrado a trabajar con fechas en Javascript, ha sido bastante difícil abordarlo sin pedir ayuda, y he estado luchando durante horas con esto.

Mi objetivo es elegir una fecha utilizando el DatePicker de Material UI y almacenarla como una cadena de texto siguiendo el formato “yyyy-MM-dd”.

En mi último intento, intenté esto:

const [userData, setUserData] = useState({
    rating: 0,
    review: "",
    date: Date(),
});

Luego, en el DatePicker:

<localizationprovider dateadapter="{DateAdapter}">
    <desktopdatepicker label="Watched on" inputformat="MMM dd, yyyy" disablemaskedinput="{true}" name="date" value="{userData.date}" onchange="{(date)" ==""> {
            setUserData((prevValue) => {
                const dateWatched = startOfDay(date);

                return {
                    ...prevValue,
                    date: dateWatched.toISOString().slice(0, 10),
                };
            });
        }}
        renderInput={(params) => <textfield {...params}=""></textfield>}
    />
</desktopdatepicker></localizationprovider>

Si hago console.log(dateWatched.toISOString().slice(0, 10)), cuando elijo una fecha se registra correctamente. Sin embargo, la fecha que se muestra en el DatePicker no coincide. Entonces, digamos que elijo el 14 de diciembre de 2021. Se registra como “2021-12-14” como quería, pero el DatePicker mostrará el 13 de diciembre de 2021. Para que conste, mi zona horaria local es GMT -03:00, y creo que esto puede ser la causa. Quiero eliminar las zonas horarias del camino, para que no importa dónde estés ni la hora del día, siempre obtendrás la cadena de fecha correcta guardada en Mongoose y mostrada correctamente en el DatePicker.

nota: Estoy usando la biblioteca “date-fns”.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para manejar correctamente las zonas horarias y almacenar la fecha como una cadena en el formato yyyy-MM-dd, puedes utilizar la función formatISODate de la biblioteca date-fns. Esta función formateará la fecha en una cadena similar a la ISO que se puede utilizar para almacenamiento y visualización como una cadena.

    Aquí tienes un ejemplo:

    import { startOfDay } from 'date-fns';

const [userData, setUserData] = useState({
  rating: 0,
  review: "",
  date: formatISODate(new Date()),
});

<localizationprovider dateadapter="{DateAdapter}">
  <desktopdatepicker label="Visto el" inputformat="MMM dd, yyyy" disablemaskedinput="{true}" name="date" value="{userData.date}" onchange="{(date)" ==""> {
      const formattedDate = formatISODate(startOfDay(date));
      setUserData((prevValue) => ({
        ...prevValue,
        date: formattedDate,
      }));
    }}
    renderInput={(params) => <textfield {...params}=""></textfield>}
  />
</desktopdatepicker></localizationprovider>

    En este ejemplo, utilizamos la función formatISODate para formatear el estado inicial de userData.date. Luego, en el evento onChange, utilizamos startOfDay de date-fns para eliminar el componente de tiempo de la fecha seleccionada antes de formatearla utilizando formatISODate. Esto asegurará que la fecha siempre esté en el formato y la zona horaria correcta.

Comments are closed.