El parseo de fechas en javascript es una tarea recurrente en todo proyecto front. Da igual el proyecto, casi siempre tienes que pasear fecha. Lo primero que hay que hacer es mirar si merece la pena descargar una librería para parsear fechas. Si la respuesta es que sí, entonces seguramente hayas contemplado instalar la librería de moment.js ya que es una de las más conocidas.

Pues bien, dayjs es exactamente igual que moment.js, con la misma sintaxis y todo, solo que dayjs pesa mucho menos. A día de cuando estoy escribiendo este artículo, moment.js pesa 67,9Kb, mientras que el archivo minificado de dayjs solo ocupa 2Kb.

Como he dicho, la sintaxis de ambas librerías es la misma, incluso ambas tienen los mismos nombres de funciones. Esto es porque la gente que hace dayjs tiene una serie de tests que comprueban que la librería funciona exactamente igual que la otra. Tanto es así que la documentación de momentjs te sirve perfectamente para days ya que como he dicho todos los nombres de funciones coinciden.

Veamos cómo se usa y se instala dayjs.

Instalación

Para instalar dayjs tienes muchas posibilidades, como en cualquier librería de javascript.

Lo más rápido es utilizar el CDN para no tener que descargar la librería en el proyecto. Para ello tan solo tienes que meter esta línea en el head del HTML de tu proyecto:

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.9.4/dayjs.min.js"
  integrity="sha512-XZSHSEFj4QeE0G4pwy4tToyAhF2VXoEcF9CP0t1PSZMP2XHhEEB9PjM9knsdzcEKbi6GRMazdt8tJadz0JTKIQ=="
  crossorigin="anonymous"
></script>

Esto es recomendable para proyectos sencillos o de pruebas, lo que yo recomiendo es descargar el archivo js de la librería para guardarlo en el propio proyecto. Para ello, abre está URL:

https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.9.4/dayjs.min.js

💾 Botón derecho > "Guardar cómo" y lo guardas en el proyecto que estés desarrollando.

Luego tan solo tienes que referenciar el archivo que acabas de descargar en el head del HTML:

<script src="ruta/al/arvchivo/dayjs.min.js"></script>

La última forma de usar dayjs es usándola como una librería más de NPM. Para ello, si estás en un proyecto con dependencias NPM ejecuta:

npm install dayjs

Si lo has instalado con npm install, para usar la librería tienes que importar dayjs en los archivos javascript:

import dayjs from "dayjs";

Por cierto, si quieres una guía más exhaustiva de cómo se usa NPM te recomiendo que le eches un ojo a este artículo completo que creé sobre NPM

Primeros pasos con dayjs

Day js como hemos dicho, tiene la misma sintaxis que moment.js por lo que si antes ya habías usado esta librería no tienes que aprender nada nuevo. Tan solo tienes que cambiar moment.loquesea() por dayjs.loquesea(), eso es todo.

Si nunca has usado dayjs no te preocupes porque en este artículo voy a tratar de explicarte cómo funciona.

Lo primero que tienes que saber es que dayjs tiene una función llamada dayjs que es la base de esta librería. Esa función acepta un parámetro que será la fecha a parsear, y lo que va a hacer es devolver un objeto de tipo dayjs que nos servirá para luego poder formatear, transformar, etc las fechas. Veamos un ejemplo:

console.log(dayjs("2020-10-09"));

Si ejecutas el código de arriba verás que en la consola se pinta algo parecido a esto:

Se ve en consola un objeto javascript con muchas propiedades

Este es el objeto dayjs del que te hablaba, y lo que ves en la consola son las propiedades y funciones que puedes ejecutar sobre ese objeto. Pero antes de eso veamos primero las opciones que tenemos para crear este objeto dayjs del que hablamos.

Parseo de fechas con dayjs

A la función base de dayjs con el mismo nombre, podemos pasar strings que sean fechas en cualquier formato (incluso fechas nativas de javascript). Por ejemplo todas estas fechas son fechas válidas:

dayjs("2020-10-09");
dayjs("2020/10/09");
dayjs("30-June 2008");
dayjs(1603730600); // Formato epoch
dayjs(new Date());

Incluso podemos no pasar fecha a la función de dayjs. En ese caso dayjs creará el objeto con la fecha actual, es decir, que la última línea de los ejemplos anteriores se puede cambiar por:

dayjs();

Ojo cuidado porque las fechas se pasan en formato con el año delante, es decir esta fecha es inválida:

dayjs("02-12-1995");

Más adelante veremos cómo se pasan las fechas en formato español.

También es importante que conozcas que:

dayjs(undefined);

También devuelve la fecha actual pero:

dayjs(null);

Devuelve el objeto dayjs pero como si se tratara de una fecha inválida.

Si estás seguro del formato que tienen las fechas que pasas a dayjs lo mejor es pasar como segundo parámetro el formato de las fechas. Esto te puede servir por ejemplo si manejas fechas desde una API, para validar cuando una fecha que te pasan no tiene el formato correcto. Por ejemplo también te puede servir para validar que un usuario escribe en un campo de texto la fecha en el formato que toca:

dayjs("12-25-1995", "MM-DD-YYYY"); // Fecha valida
dayjs("12-25-1995", "MM-DD-YYYY"); // Fecha inválida

Por último, tienes que saber que puedes llamar a la función dayjs con este objeto:

dayjs({
  year: 2010,
  month: 3,
  day: 5,
  hour: 15,
  minute: 10,
  second: 3,
  millisecond: 123,
});

Ese es el objeto completo pero puedes pasar solo alguna de las propiedades, por ejemplo para crear una fecha actual con cierta hora y minutos:

dayjs({ hour: 15, minute: 10 });

GET y SET de parámetros de las fechas

Ahora que sabemos crear el objeto de dayjs ya podemos usarlo para conseguir partes de las fechas. Lo primero que tienes que saber es que las funciones para devolver ciertas partes de las fechas tienen el mismo nombre que las funciones para setear parámetros. Es decir, si llamas a la función para recuperar la hora que tiene una determinada fecha, por ejemplo, si no pasas parámetro te devolverá el dato y si llamas a la función y pasas un número entonces estarás seteando la fecha para que tenga esa hora.

La API de momentjs y dayjs es muy intuitiva y puedes deducir fácilmente el nombre de todas las funciones dependiendo de lo que quieras recuperar o modificar.

GET y SET para el tiempo y la hora

Empecemos por las cosas que tienen que ver con la hora y el tiempo de las fechas.

Para empezar si quieres recuperar o modificar los segundos que tiene una fecha simplemente tienes que hacer:

dayjs().second(); // Devuelve los segundos que tenga la fecha
dayjs().second(1); // Modifica la fecha para que tenga los segundos puestos a 1

Para los ejemplos voy a crear el objeto dayjs sin parámetro para que sea más simple, pero puedes crear este objeto con el parseo de fechas que hemos visto antes.

Para los minutos es más de lo mismo:

dayjs().minute(); // Devuelve los minutos de la fecha
dayjs().minute(59); // Setea los minutos

En este caso los minutos se pasan y se devuelven entre 0 y 59.

Y para sopresa de nadie, para las horas es igual también:

dayjs().hour(); // Devuelve las horas de la fecha
dayjs().hour(8); // Setea las horas a la fecha

Las horas van en formato digital, es decir, entre 0 y 23. En el ejemplo de arriba, en la segunda línea, obtendremos la fecha actual pero a las 8 de la mañana.

GET y SET para la fecha

Para las cosas que tienen que ver con la fecha, es decir, número del día, número de mes, año, etc es más de lo mismo.

Para el día del mes, es decir, de 0 a 31 (dependiendo del mes) es así:

dayjs().date(); // Devuelve el día del mes
dayjs().date(1); // Setea lel día del mes

Ten cuidado con este método porque como se llama date puedes pensar que es para algo que tiene que ver con toda la fecha, pero no es así, es solo para obtener y cambiar el día del mes.

Para el día de la semana (desde 0 a 6) es así:

dayjs().day(); // Devuelve el día de la semana
dayjs().day(0); // Setea el día de la semana

Lo mismo para el número del mes (entre 0 y 11)

dayjs("2018-06-27").month(); // Devuelve 05
dayjs().month(0); // Setea la fecha actual pero con el mes puesto en Enero

Por último, puedes conseguir el año de una fecha, o cambiarlo

dayjs("2018-06-27").year(); // Devuelve 2018
dayjs().year(2018); // Setea la fecha actual pero con el año a 2018

Como ves toda la sintaxis es muy sencilla de recordar, eso hace que esta librería sea muy cómoda de usar porque no tienes que consultar la documentación todo el rato.

Operaciones con fechas

Bien, de momento todo lo que hemos visto tampoco ahorra mucho código. Realmente con las fechas nativas de javscript new Date ya podemos hacer este tipo de operaciones de recuperar valores de las fechas y modificarlos. A partir de aquí vienen cosas más interesantes.

En esta sección vamos a ver una cuantas operaciones que podemos hacer con el objeto de dayjs que creamos siempre.

Sumar y restar partes de la fecha

Empecemos por lo básico, añadir partes y restar partes de la fecha.

Para sumar partes de las fechas existe la función add:

dayjs().add(5, "day");

Así de sencillo, recibe dos parámetros, el primero es el número a añadir y el segundo parámetro es la parte de la fecha que quieres sumar. En este ejemplo lo que se hace es añadir 5 días a la fecha actual. El resultado de esta operación es un objeto dayjs con ese parámetro modificado.

Los parámetros que puedes modificar son los siguientes: second, minute, hour, day, week, month, y year. Los mismos parémtros con los mismos nombres que vimos en el apartado anterior de los GET y SET.

Restar tiene la misma sintaxis con los mismos parámetros pero la función tiene el nombre de subtract. Ejemplos de sumas y restas:

dayjs().subtract(5, "day");
dayjs().add(2, "week");
dayjs().subtract(10, "year");
dayjs().add(3, "hour");
dayjs().subtract(6, "minute");

Poner un parámetro de la fecha al inicio o al final

Hay otras dos opciones muy interesantes, startOf y endOf. Ambas funciones reciben un parémetro en el que tienes que pasar el campo de la fecha que quieres poner al inicio o al final. El parámetro a pasar tiene los mismos nombres que los que hemos visto hasta ahora: second, minute, hour, day, week, month, y year.

Imagina que tienes una fecha y quieres modifcar el mes de esa fecha para que esté al inicio del año, es decir, 1 de enero a las 00:00 de la fecha que pases. Con startOf sería así:

dayjs().startOf("year");

También puedes hacer esto con las funciones SET que hemos visto antes, pero tendrías que cambiar el mes, día, hora y minutos. Con esta función tienes todo en una línea.

Este ejemplo en concreto no es demasiado útil, pero por ejemplo si quieres poner una fecha para que el día sea el de inicio de semana es tan fácil como:

dayjs().startOf("week");

Así no tienes que calcular en qué día cae el Lunes de esa semana o cosas de esas.

La función de endOf es más de lo mismo, solo que pone la fecha al último parámetro que haya. Por ejemplo, fecha actual pero poniendo el día al último del año:

dayjs().endOf("year");

Esta función de endOf es mucho maś útil ya que te evitas tener que andar calculando el último día del mes, semana, etc.

IMPORTANTE. Se me ha olvidado comentar que como estos métodos devuelve un objeto dayjs con los parámetros modificados, una ventaja muy grande es que se pueden concatenar distintas llamadas en una sola línea, Ejemplo:

dayjs("2017-03-23").add(1, "day").subtract(1, "year").year(1996);

Formateo de fechas

Cómo formatear fechas con javascript

Aquí viene una de las cosas que más me gusta de este tipo de librerías, el formateo de las fechas, es decir, pasar una fecha a string con el formato que queramos.

Todos hemos creado alguna vez este tipo de funciones en javascript vanilla para formatear fechas:

function formatDate(date) {
  const parsedDate = new Date(date);
  return (
    parsedDate.getYear() +
    " " +
    parsedDate.getMonth() +
    " " +
    parsedDate.getDate()
  );
}

Todo esto con dayjs se resuelve con un único método llamado format al que tienes que pasar en forma de string el formato que quieres. Pongo un ejemplo y ahora lo comentamos:

dayjs("2019-01-25").format("DD/MM/YYYY"); // '25/01/2019'

Como ves, el método format se aplica también sobre el objeto dayjs con la fecha que quieres. Dentro del format se pasa en forma de string el formato que quieres, eso es todo. Veamos ahora los strings que puedes pasar.

Untitled

En el ejemplo de arriba he usado DD para poner el día del mes en dos dígitos, MM para el número del mes en dos dígitos y YYYY para el año completo, todo ello separado por barras.

Si quisiera el mismo formato pero separado por guiones tan solo tendría que hacer:

dayjs("2019-01-25").format("DD-MM-YYYY"); // '25-01-2019'

O si quiero la fecha separada por espacios:

dayjs("2019-01-25").format("DD MM YYYY"); // '25 01 2019'

O separada con espacios y el nombre del mes completo:

dayjs("2019-01-25").format("DD MMMM YYYY"); // '25 January 2019'

Más tarde en este mismo artículo te enseño a poner el nombre del mes en español.

Comprobaciones con fechas

Otra cosa muy útil que ofrece esta librería es la posibilidad de comprobar cosas con las fechas. Como pasa con todos los ejemplos que hemos visto hasta ahora, las fechas siempre se manejan con el objeto que creas con el constructor de dayjs. No me voy a parar en cada ejemplo para no hacer el artículo demasiado largo, creo que los ejemplos se entienden bien sin tener que explicarlos.

Comprobar si una fecha es anterior a otra

dayjs().isBefore(dayjs("2011-01-01"));

Comprobar si una fecha es posterior a otra

dayjs().isAfter(dayjs("2011-01-01"));

Comprobar si dos fechas son iguales

dayjs().isSame(dayjs("2011-01-01"));

Fechas en español 🇪🇸

Por defecto dayjs viene con fechas en inglés, si quieres poner las fechas en español tan solo tienes que cargar un archivo nuevo javascript, aparte del de dayjs.

Si instalaste dayjs mediante cdn, añade debajo del de dayjs la siguiente línea:

<script src="https://unpkg.com/dayjs@1.9.4/locale/es.js"></script>

Si, lo que hiciste fue bajarte el archivo javascript de dayjs en el proyecto, de igual forma descarga el archivo. Abre esta URL y dale botón derecho > guardar cómo y descárgatelo en tu proyecto. Como hiciste antes, añade en el head la ruta a este archivo:

<script src="ruta/al/arvchivo/es.js"></script>

Si por el contrario usas npm tan solo tienes que importar el arhivo con las traducciones de la propia librería de dayjs:

import es from "dayjs/locale/es";

Activando la traducción

Por último, para activar las traducciones tan solo tienes que llamar a la función locale de dayjs con el nombre del locale, en este caso tienes que poner "es".

dayjs.locale("es");

Con esto activado, cuando hagas format de una fecha, podrás mostrar el nombre de los meses y de los días en español. Ejemplo:

dayjs("2019-01-25").format("DD MMMM YYYY"); // '25 Enero 2019'

Plugins

Además de toda esta funcionalidad que hemos visto, dayjs viene con un set de plugins que añaden todavía más. pero hay que activar los que se quieran usar. Voy a poner una lista de los que considero más útiles y un enlace a la documentación por si lo quieres activar.

  • advancedFormat: Añade más tipos de formatos para las fechas, por ejemplo para números ordinales (1st, 2nd...), el cuatrimestre el año, etc.
  • customParseFormat: Si el parseo de fechas que viene con dayjs se te queda corto, con este plugin puedes definir tus propios parseaos para cuando tienes fechas strings que tienen un formato raro.
  • dayOfYear: Para devolver o modificar el número del día de todo el año, es decir, desde 1 a 365.
  • isBetween: Uno de los más útiles, para saber si una fecha está contenida dentro de otras dos fechas, es decir, puedes saber si una fecha está dentro de un rango de fechas.
  • isToday: Para saber si una fecha es hoy, Sin este método tendrías que comparar día, mes y año.
  • isTomorrow: Para saber si una fecha es mañana.
  • isYesterday: Para saber si una fecha es ayer.
  • quarterOfYear: Devuelve el número de cuatrimestre del año, de 1 a 4. Además añade la posibilidad de poder poner una fecha a comienzos de cuatrimestre o a final de cuatrimestre.
  • relativeTime: Añade 4 métodos, from, to, fromNow y toNow y como dice su nombre devuelve la diferencia de tiempo entre dos fechas o entre una fecha y la fecha actual. Ejemplo: hace 3 horas
  • utc: Como su nombre indica, añade soporte para fechas en formato UTC.

Conclusiones

Eso es todo respecto a dayjs. Como ves, es una librería muy completa (igual que momentjs) pero si me tengo que quedar con una me quedo con esta, más que nada porque ocupa mucho menos espacio y está más actualizada.

Yo personalmente es una de las pocas librerías que uso en todos mis proyectos front (siempre que tengo que tratar con fechas).

Te invito a que eches un vistazo a su documentación oficial ya que hay cosas que las he comentado por encima para no hacer esto más largo.

Por último decirte, que eches un vistazo a este artículo de @midudev ya que tiene un artículo muy interesante que hace lo mismo que el plugin relative pero sin dependencias, en javascript vanilla:

https://midu.dev/como-crear-un-time-ago-sin-dependencias-intl-relativeformat/