portada dates en javascript guía completa

Dates en JavaScript: Guía completa

Última actualización:

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 constructorSe 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 sandbox.js respectivamente.

1. Creamos un boilerplate en el index.html y lo vinculamos al sandbox.js. Así nos queda nuestro archivo HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dates en JavaScript</title>
</head>
<body>


    <script src="sandbox.js"></script>
</body>
</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 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. ​​

date fns format metodo

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 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.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Reloj digital con JS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js"></script>
    <script src="sandbox.js"></script>
</body>
</html>

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. Y si crees que este post puede serle útil a alguien, ¡compártelo!

Otros artículos que pueden interesarte

Días del 353 al 386
Objetivos versus realidad Y nuevamente, llegó otro día clave. Llegó…y pasó. El pasado 4 de marzo este Reto Computer Geek[...]
Construye Minioland: Tu primera aplicación con Angular | Parte #1
¿Qué vamos a construir?Minioland, o así he decidido llamar a esta sencilla app, totalmente responsive y de tipo Single Page[...]
Angular: Entendiendo la Directiva ngModel
Angular es un framework que nos permite, entre otras cosas, añadir contenido dinámico a nuestros archivos HTML. Una de las formas[...]
Si crees que este post puede serle útil a alguien, por favor, ¡compártelo!:

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Como toda web legal que se precie, utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestro sitio web. Si continúas utilizando este sitio asumiremos que estás de acuerdo. más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar