Introducción
Los dates son un tipo de objetos de JavaScript (JS), muy útiles para trabajar con fechas, como podría ser la fecha de registro de un usuario o la fecha de publicación de un artículo. En este post vamos a aprender cómo crearlos y manipularlos según nuestras necesidades.
Creación de dates
Para crear dates debemos usar un constructor. Se llama "constructor" porque "construye" un nuevo tipo de objeto. Hablaremos más sobre esto en una serie independiente sobre Object Oriented Programming. Pero por ahora nos vamos a quedar con el date constructor, un constructor de JS que nos proporciona un javaScript object de tipo date.
¿TODO ESTO DE LOS DATA TYPES TE SUENA A CHINO? 
Entonces echa un vistazo a esta guía completa sobre los data types en JavaScript.
Vamos a trabajar con un archivo HTML y otro archivo JS. Los llamaremos index.html y sandbox.js respectivamente.
1. Creamos un boilerplate en el index.html y lo vinculamos al sandbox.js. Así nos queda nuestro archivo HTML:
2. Creamos una variable en el archivo JS a la que llamamos now. La llamamos así porque, cuando creamos un nuevo objeto de tipo date, JS nos dará siempre la fecha actual, minutos y segundos incluidos.
Para crear un objeto de este tipo, usamos la keyword "new" y le especificamos qué objeto queremos crear. En nuestro caso, Date().
Verás que lleva paréntesis, como las funciones. Esos paréntesis son necesarios porque en realidad estamos "invocando" algo, como haríamos con una función. Pero en este caso, estamos invocando al date constructor.
3. Hacemos un console.log de nuestra variable.
Aquí el bloque de código que hemos añadido:
const now = new Date(); console.log(now);
Si compruebas tu consola, verás que te devuelve la fecha actual, en mi caso:
Sun Oct 13 2019 11:52:31 GMT+0200 (Central European Summer Time)
Y así hemos creado nuestro primer date object. Puedes hacer un typeof para comprobarlo:
console.log(typeof now); // object
Métodos del date object
Lo habitual es que no necesitemos toda la información proporcionada en el date object, sino solo una parte. Por ejemplo, el día y el mes. Para eso podemos utilizar los múltiples métodos que nos proporciona este objeto. ¡Vamos a verlos!
Seguiremos usando nuestra variable now y aplicando los métodos a ésta.
getFullYear()
Sirve para obtener el año actual:
console.log(now.getFullYear()); // 2019
getMonth()
Sirve para obtener el mes actual. Lo que ocurre es que JS nos devuelve un número en un array de meses, array que empieza a contar desde 0, que correspondería a Enero. Por tanto, si ahora estamos en Octubre, nos daría el número 9:
console.log(now.getMonth()); // 9
getDate()
Nos devuelve el día del mes en el que nos encontremos:
console.log(now.getDay()); // 13
getDay()
Nos devuelve el día de la semana (en número) en el que nos encontremos. Sucede lo mismo que con el método getMonth(), JS extrae de un array imaginario el día de la semana que es, donde el domingo es el 0:
console.log(now.getDay()); // 0
getHours()
Nos devuelve la hora que es actualmente:
console.log(now.getHours()); // 16
getMinutes()
Nos devuelve el minuto en el que estamos actualmente:
console.log(now.getMinutes()); // 42
getSeconds()
Nos devuelve el segundo en el que estamos actualmente:
console.log(now.getSeconds()); // 59
Date strings
También existen métodos que nos permiten obtener strings de fechas en diferentes formatos, como el método toDateString():
console.log(now.toDateString()); // Sun Oct 13 2019
O el método toTimeString(), que nos devolvería un string con la hora local actual:
console.log(now.toTimeString()); // 16:53:25 GMT+0200 (Central European Summer Time)
Para obtener un string con una fecha en formato corto y una hora, podemos utilizar el método toLocaleString():
console.log(now.toLocaleString()); // 10/13/2019, 4:55:42 PM
Timestamps como herramienta para comparar fechas
Vistos todos estos métodos, existen también otros métodos relacionados con una fecha concreta: 1 de Enero de 1970. Estos métodos permiten hacer comparaciones con esa fecha y la que nosotros elijamos. El más popular es el método getTime().
Este método nos devuelve los mili-segundos que han pasado desde el 01/01/1970 a las 12 am.
console.log(now.getTime()); // 1570978114398
En la práctica es mucho más sencillo trabajar con timestamps que con date objects. Así que nosotros vamos a trabajar directamente con timestamps para facilitarnos la vida.
Imaginemos que queremos saber la diferencia de tiempo existente entre una fecha del pasado (el 8 de Octubre de 2019) y hoy.
1. Para ello, creamos un nuevo date object y lo almacenamos en una variable. A este objeto debemos pasarle un date string con la fecha que queramos registrar. Esta date string puede estar en muchos formatos, así que elegimos uno de ellos.
2. Mantenemos nuestra variable now, le aplicamos el método getTime() y hacemos un console.log de ambas.
const now = new Date();
const before = new Date('October 8 2019 16:30:00');
console.log(now.getTime());
console.log(before);
Verás que en tu consola se imprimen los mili-segundos que han pasado desde 1/1/1970 y la fecha del 8 de Octubre.
3. Si ahora hacemos un console.log de la variable before aplicándole el método getTime(), nos devolverá los mili-segundos transcurridos desde 1/1/1970 hasta 8/10/2019.
console.log(before.getTime());
4. Para saber el tiempo transcurrido entre el 8 de Octubre y hoy sólo tendríamos que restarle los mili-segundos de before a los mili-segundos de now. Nos creamos una variable para guardar el resultado de la resta.
const diff = now.getTime() - before.getTime(); console.log(diff); // 438508808
5. Esto está bien pero queremos algo más útil, como los días transcurridos entre una fecha y otra. Un caso típico sería para poder mostrar en un blog hace cuántos días se publicó un post. Así que necesitamos convertir el resultado, que ahora está en mili-segundos, en días.
Para ello vamos a sacar la diferencia en minutos, en horas y finalmente, en días.
Para sacar cuántos minutos hay de diferencia, utilizamos el método Math.round y le pasamos la variable diff dividida por 1000 (porque 1 segundos son 1000 mili-segundos) y por 60 (porque en 1 minuto hay 60 segundos).
Seguimos este patrón para sacar la diferencia de horas y de días y guardamos cada valor en una variable.
6. Hacemos un console.log para ver cuántos días han transcurrido entre una fecha y otra.
const minutes = Math.round(diff / 1000 / 60);
const hours = Math.round(minutes / 60);
const days = Math.round(hours / 24);
console.log(minutes, hours, days); // 7323 122 5
console.log(`This post was written ${days} ago`); // This post was written 5 ago
Cómo convertir un timestamp en un date object
Es tan sencillo como pasarle una variable como esta, que sólo contiene un integral puro:
const myTimestamp = 1570000000000;
a un nuevo date constructor:
console.log(new Date(myTimestamp)); // Wed Oct 02 2019 09:06:40 GMT+0200 (Central European Summer Time)
Date-fns: la mejor JS library para trabajar con fechas
Es muy importante aprender a trabajar con vanilla JavaScript para entender cómo funciona realmente JS. Una vez entendido, podemos adentrarnos en el mundo de las JS libraries, paquetes de código listos para facilitarnos la vida.
Date-fns es una JS library que nos allana mucho el camino a la hora de trabajar con fechas y formatos. Si vas a "documentation", verás que en la barra lateral izquierda tienes todo lo que date-fns puede hacer, proporcionándote métodos de JS para ello.
Veamos el format method, por ejemplo.
Podemos elegir qué pattern usar según el resultado que queramos conseguir. Por ejemplo, "yy" nos daría que estamos en el año 19, mientras que "yyyy" nos daría el año con sus 4 números (2019).
Ten en cuenta la versión de la library que utilices, porque los patterns pueden ser distintos según qué versión. En la parte superior derecha de la web puedes seleccionar tu versión. En mi caso es la v1.30.1.
Vamos a ver cómo funciona esta library exactamente.
1. Date-fns tiene una nueva versión (v2) desde 2019, que sólo puede usarse con npm o yarn. Pero como esto queda fuera del ámbito de este artículo, vamos a ceñirnos a usar un CDN de la library en una versión anterior (la última disponible antes de pasarse al sistema de npm).
Colocamos el CDN antes de nuestro archivo sandbox.js.
Puedes empezar con un sandbox.js en blanco o comentar todo el código anterior.
Imaginemos que queremos averiguar si una cierta fecha es efectivamente dicha fecha.
2. Para eso, podemos utilizar un método aplicado a un objeto llamado dateFns, al que tenemos acceso gracias a la date-fns library que hemos vinculado a nuestro proyecto. Ese método sería isToday(), al que debemos pasarle por parámetro la fecha que queremos comprobar.
Esta operación devuelve un boolean. True si es cierto que la fecha que le pasamos es la fecha actual (hoy), o false si no lo es.
const now = new Date(); console.log(dateFns.isToday(now)); // true
Naturalmente, esto siempre nos dará true.
3. Si ahora le pasásemos cualquier otro valor a nuestro date object (en mili-segundos), el resultado ya podría ser otro (false), porque le estamos pasando una fecha del pasado.
const now = new Date(25468687); console.log(dateFns.isToday(now)); // false
Sabiendo el funcionamiento básico de la library, vamos a volver al método format y a trastearlo un poco. Podrás ver que la sintaxis es:
format(date, format, [options])
4. Así pues, debemos elegir un format de todos los patterns de la tabla. Probemos unos cuantos.
console.log(dateFns.format(now, 'YYYY')); console.log(dateFns.format(now, 'MMM')); console.log(dateFns.format(now, 'dddd')); console.log(dateFns.format(now, 'Do')); console.log(dateFns.format(now, 'dddd Do MMMM YYYY'));
También podemos comparar fechas de manera muy fácil. Para eso podemos utilizar un método llamado distanceInWords, pero hay muchos más. Este método recibe dos parámetros obligatorios y uno opcional.
5. Creamos una variable que almacene cualquier fecha del pasado y le aplicamos el método distanceInWords para compararla con la fecha actual.
const now = new Date();
const before = new Date('October 8 2019 16:30:00');
console.log(dateFns.distanceInWords(now, before)); // 6 days
6. Podemos añadirle el parámetro opcional, que admite a su vez varias opciones. Vamos a probar una de ellas, como es añadirle un sufijo.
console.log(dateFns.distanceInWords(now, before, { addSuffix: true })); // 6 days ago
THE END!
¡Y con esto terminamos nuestro repaso a los dates como data types de JavaScript! Espero que hayas aprendido algo nuevo. Si te queda alguna duda, ¡nos vemos en los comentarios!
Si quieres seguir practicando, echa un vistazo a este tutorial sobre cómo construir un reloj digital con vanilla JavaScript.
Otros artículos que pueden interesarte