Saltar al contenido

Material Angular 6 DatePicker está analizando mi fecha 1 día antes

Deseamos compartir contigo la mejor respuesta que descubrimos en línea. Nosotros esperamos que te sea de mucha utilidad y si puedes compartir alguna mejora hazlo con total libertad.

Solución:

Entonces, después de investigar un poco, descubrí que era un problema de zona horaria. Para arreglarlo temporalmente, tuve que concatenar T00:00:00 al final de mi fecha que venía de backend bajo el formato aaaa/MM/dd.

La mejor opción es, si es posible, ir al backend para cambiar el formato a aaaa/MM/ddTHH:mm:ss.

De lo contrario, hay 2 opciones para resolver el problema cuando tienes que usar el formato. aaaa/MM/dd en su Angular 6 Material DatePicker: lo malo y lo bueno.

  • Lo malo (y posiblemente solo temporal) es hacer lo que hice, concatenar T00:00:00 hasta el final de la fecha antes de que DatePicker la analice.
  • Lo bueno es obtener la fecha stringconviértalo en fecha, convierta la zona horaria a GMT y luego permita que DatePicker lo analice.

Espero poder ayudar a los desesperados, como yo.

Para cualquiera que solo quiera que sus fechas sean fechas UTC y esté atascado usando el objeto JS Date a través de DatePicker, puede agregar una opción de adaptador al @NgModule proveedores:

@NgModule(
  imports: [MatDatepickerModule, MatMomentDateModule],
  providers: [
     provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue:  useUtc: true  
  ]
)

Necesitarás agregar @angular/material-moment-adapter para usted package.json e importe el objeto de módulo/opciones:

import MAT_MOMENT_DATE_ADAPTER_OPTIONS, MatMomentDateModule from '@angular/material-moment-adapter';

Una vez hecho esto, cualquier DatePicker proporcionará fechas UTC, y considerando que no hay oportunidad de seleccionar un componente de tiempo con DatePicker, esto parece apropiado.

Extraído de la información de Material DatePicker.

Puedes hacer una función de análisis, como esta:

let newDate= new Date(oldDate);
newDate.setMinutes(newDate.getMinutes() + newDate.getTimezoneOffset());

return newDate;

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *