fechas

Ajustando fechas en Javascript

Introducción

No sé si sólo a mí me pasa o si sólo yo ocupo las fechas en Javascript, pero siempre que intento compararlas, algunas salen mal debido al offset. Sé que no se debe confiar en las fechas del cliente, pues se pueden cambiar, pero en alguna ocasión debimos necesitar trabajar con estas y puede que nos haya dado resultados inesperados.
Así que hoy mostraré cómo “ajustar el tiempo” de las fechas de Javascript utilizando getTimezoneOffset.

Descripción del problema

Esto pasa cuando creamos un objeto fecha utilizando una fecha como cadena. En donde la cadena es algo como “2018-03-05” (que representa el 5 de marzo del 2018 ). El objeto se crearía de la siguiente manera:

let fecha = new Date("2018-03-05");

Nosotros esperamos que la fecha sea el 5 de marzo del 2018 a las 12 de la noche, o a las 00:00:00. Pero al imprimirlo...

Sorpresa. Dice que la fecha es del domingo (sunday) 4 de marzo a las 6 de la tarde. Y nosotros esperábamos que fuera del lunes 5 de marzo a las 0 horas.

Lo que está pasando aquí es que se están restando las horas del Tiempo universal coordinado (creo); en mi caso, como soy de México, resta 6 horas. ¿y si no estamos en México?

Javascript provee una forma de obtener el offset de la fecha. Y con ello podemos arreglar las fechas.

Vamos a ver la solución más abajo.

Solución

Esto es simple, al objeto que ya hemos creado vamos a ponerle el tiempo en milisegundos como el resultado de los milisegundos que ya tiene, sumando los milisegundos que resultan al obtener el offset. Para no confundirnos, se hace así:

let fecha = new Date("2018-03-05");
fecha.setTime(fecha.getTime() + fecha.getTimezoneOffset() * 60 * 1000);

Expliquemos esto.

setTime recibe un número, que es el tiempo en milisegundos que han pasado desde la fecha unix.

getTimezoneOffset devuelve en minutos la diferencia de tiempos; en este caso devolverá 360, pues son 6 horas multiplicadas por 60 minutos.

Estos 360 minutos los multiplicamos por 60 para pasarlos a segundos, y luego al resultado lo multiplicamos por 1000 para convertirlo a milisegundos.

Con eso, hacemos la resta. Obtenemos los milisegundos que ya tiene la fecha con getTime y a eso le sumamos el resultado que obtuvimos arriba.

En pocas palabras, se le suman los milisegundos de la diferencia de horas. Si después de hacer esto imprimo la fecha, tengo esto:

Correcto. La fecha ahora sí es del lunes a las 12 de la noche. Y este método, me parece, funciona para cualquier zona horaria.

Así, podemos arreglar y ajustar fechas en Javascript sin perder la cabeza.

Conclusión

Cabe mencionar que esto sólo me ha pasado al instanciar objetos con una fecha ya existente; si se instancia y no se le pasan parámetros, todo va bien. Es decir, si hago lo siguiente todo va bien:

let ahora = new Date();

Se desajusta cuando al constructor de Date le paso una cadena como argumento.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Ver comentarios

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

5 días hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

2 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

2 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

2 semanas hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

2 semanas hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

2 semanas hace

Esta web usa cookies.