ManzDev
Perfil de Manz Dashboard de actividad
HTML5 Etiquetas HTML
CSS CSS vanilla
PostCSS Transformador CSS
Javascript Javascript ES2020+
NPM Node Package Manager
WebComponents Componentes web
Terminal Terminal de GNU/Linux
VueJS Framework VueJS 3
Automatizadores Empaquetadores Javascript
Dibujando con CSS ¡Dibujos hechos con sólo CSS!
Experimentos con Javascript ¡Experimentos con Javascript!

Formatear fechas con dayjs

Manipular fechas con un lenguaje de programación siempre ha sido complicado, ya que tenemos múltiples formas de representarlas. El objeto Date nativo está bien, pero puede quedarse bastante corto cuando queremos trabajar a más alto nivel y no tener que implementarlo todo nosotros.

Históricamente, en el ecosistema Javascript se utilizaba frecuentemente una librería llamada Moment.js. Sin embargo, esa librería se considera obsoleta desde hace tiempo y te recomiendan migrar a otras librerías más modernas, como por ejemplo Luxon o dayjs, de la cuál hablaremos en esta ocasión.

DayJS es una librería muy pequeña (Sólo 2KB) que puede servirnos de alternativa a Moment.js, ya que su API es muy flexible y te costará poco acostumbrarte si vienes de Moment. Entre otras cosas, la librería proporciona inmutabilidad, encadenamiento de métodos, soporte de idiomas y navegadores.

Instalación de dayjs

Para utilizar la librería dayjs debemos importarla en nuestro código. Esto se puede hacer de múltiples formas, como veremos a continuación. La primera, y más tradicional, es incluir la URL donde se encuentra el fichero .js de la librería dayjs. Podemos utilizar un repositorio de librerías como CDNjs o JSDelivr:

<!-- Método 1: HTML+CDN -->
<script src="https://cdn.jsdelivr.net/npm/dayjs"></script>

Sin embargo, en estos días es más habitual hacerlo desde los ficheros Javascript. Se puede hacer también de varias formas. La primera, y más conservadora, instalando la librería con NPM mediante el comando npm install dayjs . De esta forma, podremos hacer un bare import de la siguiente forma:

/* Método 2: JS+NPM */
import dayjs from "dayjs";

Esto importará la librería apropiada buscándola en la carpeta node_modules , donde la habrá instalado el NPM cuando hicimos npm install.

Por último, tendremos otra forma, un poco más moderna, que es una mezcla de las dos anteriores. Se basa en utilizar un CDN para importar la librería, pero desde un fichero Javascript en lugar desde el HTML:

/* Método 3: CDN+ESM */
import dayjs from "https://cdn.skypack.dev/dayjs";

Este método requiere que el fichero javascript se cargue con una etiqueta <script type="module"> y que la librería esté en formato ESM. SkyPack es un CDN moderno de librerías preparadas para utilizar con sistema ESM. Si lo prefieres, también tienes esm.sh.

Crear fechas con dayjs

Dayjs tiene múltiples y variadas formas de crear fechas, pasando información diferente como entrada. Veamos las principales:

Método Descripción
dayjs() Crea la fecha actual. Igual a dayjs(new Date()) o dayjs(undefined) .
dayjs( date) Transforma una fecha Date en una fecha dayjs.
dayjs( isoDate) Crea una fecha específica desde formato ISO 8601.
dayjs( date, format) Crea una fecha específica, desde un formato específico.
dayjs( date, formats) Idem al anterior pero con varios formatos diferentes.
dayjs( timestamp) Calcula fecha con número de ms desde 1-ENE-1970 a las 12AM UTC.
dayjs.unix( timestamp) Idem, con sec en vez de ms . Igual a dayjs(timestamp * 1000) .
dayjs( date) Crea una fecha a partir de un array de números: Año, mes, día, hora...
dayjs( date) Crea una fecha desde un objeto con claves como y , M , d , h , m , s , ms .

Como se puede ver, existen muy diversas formas de crear objetos de fechas con dayjs. Todas las formas anteriores, nos crean un objeto dayjs que contendrá una fecha y que posteriormente, veremos como representar por pantalla, también de múltiples formas. Sin embargo, vamos a centrarnos ahora sólo en la primera parte donde creamos una fecha a partir de múltiples formatos.

const now = dayjs(); // Objeto de fecha dayjs (con la fecha actual)

const isoDate = dayjs("2022-11-30T16:45:00.005Z"); // Formato ISO 8601

const date = dayjs(new Date(2022, 0, 30)); // 30-1-22 con Date nativo

De estas primeras formas, podemos crear fechas que representen en el momento actual, o fechas específicas que utilizan el estándar (ISO 8601) o que utilizan fechas creadas con el objeto Date de fechas nativas de Javascript.

Si por otro lado nos interesa crear una fecha a partir de un formato muy específico (algo muy habitual), podemos utilizar un segundo parámetro donde indicamos cuál es ese formato, mientras que en el primer parámetro pasamos un con la fecha representada en dicho formato:

import customParseFormat from "dayjs/plugin/customParseFormat";
dayjs.extend(customParseFormat);

const firstDate = dayjs("22/02/2022", "DD/MM/YYYY");

const secondDate = dayjs("2022-22-Jan", "YYYY-DD-MMM");

Si quieres utilizar esta forma de crear fechas, necesitas antes importar el plugin customParseFormat y extender de él, de lo contrario obtendrás una fecha no válida. Las letras que se utilizan para determinar el formato en el segundo parámetro son las siguientes:

Símbolo Descripción
YY / YYYY Año con 2 dígitos (22) / año con 4 dígitos (2022).
M / MM Número del mes (1, 2, 3...) / número del mes con dos dígitos (01, 02, 03...).
MMM / MMMM Nombre del mes abreviado (Jan, Feb...) / nombre del mes (January, February...).
D / DD Día del mes (1, 2, 3...) / día del mes con dos dígitos (01, 02, 03...).
H / HH Hora del día en formato de «24 horas» (0, 1, 2... 23) / versión de 2 dígitos. (00, 01, 02... 23)
h / hh Hora del día en formato de «12 horas» (1, 2, 3... 12) / versión de 2 dígitos. (01, 02, 03... 12)
m / mm Minutos (1, 2, 3...) / minutos con dos dígitos (01, 02, 03...).
s / ss Segundos (1, 2, 3...) / segundos con dos dígitos (01, 02, 03...).
S / SS / SSS Milisegundos (1, 2, 3...) / con dos dígitos (01, 02, 03...) / con tres dígitos (001, 002, 003...).
Z / ZZ Diferencia horaria en formato (+02:00) / Diferencia horaria en formato (+0200).
A / a Antes (AM) o después (PM) del mediodía en mayúsculas / Versión en minúsculas (am, pm).
Do Día del mes con número ordinal (1st, ..., 31st)

Además de los métodos anteriores, existen formas de crear fechas como las que veremos a continuación. El primero de ellos, crea una fecha a partir de un timestamp (UNIX Epoch), es decir, un que representa el número de milisegundos que han pasado desde el 1-ENE-1970 a las 12:00AM (UTC):

// Timestamp (UNIX Epoch)
const number = new Date().getTime();
const date = dayjs(number);

Por otro lado, también podemos crear fechas a partir de un donde las claves son la unidad que representa. Como claves se pueden utilizar varias opciones:

  • Plural: years, months, days o dates, hours, minutes, seconds y milliseconds.
  • Singular: year, month, day o date, hour, minute, second y millisecond.
  • Abreviación: y, M, d, h, m, s y ms.
// Object
import objectSupport from "dayjs/plugin/objectSupport";
dayjs.extend(objectSupport);

const dateFromObject = dayjs({ year: 2022, month: 3, day: 30 });

const dateFromArray = dayjs([2022, 3, 30]); // import/extend con arraySupport

Ten en cuenta que para utilizar el método de objetos, antes hay que importar objectSupport desde la carpeta de plugins de dayjs, y posteriormente extenderlo con dayjs.extend(objectSupport). En el caso de los arrays habría que hacer lo mismo con el plugin arraySupport.

Mucho cuidado al indicar el mes de una fecha. Cuando lo indicamos utilizando el Date nativo, o en formatos como el de objetos o array, el 0 equivale a Enero, mientras que el 1 a Febrero, etc.

Formatear fechas con dayjs

Hasta ahora lo que hemos hecho es crear una fecha, más concretamente, un de fecha de dayjs partiendo de prácticamente cualquier tipo de información de entrada (string con diferentes formatos, objeto Date nativo, objeto Javascript, array, etc...). Una vez tenemos ese objeto dayjs, lo que probablemente nos interese es mostrar esa información con otro tipo de formato (o el mismo).

Para ello, utilizaremos el método .format() sobre el objeto dayjs, al cuál le podemos pasar un indicando el formato de salida que buscamos:

// Creamos un objeto dayjs a partir de una fecha
const date = dayjs("2022-23-01", "YYYY-DD-MM");

// Mostramos esa fecha con el formato indicado
console.log(date.format("DD/MM/YYYY")); // "23/01/2022"

El indicado en el método .format() es muy parecido al que hablamos anteriormente, pero con algunas diferencias, como los símbolos d / dd / ddd / dddd o h / hh:

Símbolo Descripción
YY / YYYY Año con 2 dígitos (22) / año con 4 dígitos (2022).
M / MM Número del mes (1, 2, 3...) / número del mes con dos dígitos (01, 02, 03...).
MMM / MMMM Nombre del mes abreviado (Jan, Feb...) / nombre del mes (January, February...).
D / DD Día del mes (1, 2, 3...) / día del mes con dos dígitos (01, 02, 03...).
H / HH Hora del día en formato de «24 horas» (0, 1, 2... 23) / versión de 2 dígitos. (00, 01, 02... 23)
h / hh Hora del día en formato de «12 horas» (1, 2, 3... 12) / versión de 2 dígitos. (01, 02, 03... 12)
m / mm Minutos (1, 2, 3...) / minutos con dos dígitos (01, 02, 03...).
s / ss Segundos (1, 2, 3...) / segundos con dos dígitos (01, 02, 03...).
SSS Milisegundos con tres dígitos (001, 002, 003...).
Z / ZZ Diferencia horaria en formato (+02:00) / Diferencia horaria en formato (+0200).
A / a Antes (AM) o después (PM) del mediodía en mayúsculas / Versión en minúsculas (am, pm).
d / dd Día de la semana (0, 1, 2... 6) / Idem, abreviado (Su, Mo... Sa).
ddd / dddd Día de la semana corto (Sun, Mon... Sat) / Idem, completo (Sunday, Monday... Saturday).
Z / ZZ Diferencia horaria en formato +02:00 / Diferencia horaria en formato +0200.

El método .format() siempre nos devolverá los meses numéricos empezando en 1, ya que está orientado a devolver un que se utilizará para mostrar en la página a los usuarios finales.

Ten en cuenta que los objetos de dayjs (al contrario que los Date nativos) son inmutables, por lo tanto una vez establecida una fecha no puedes cambiarla. Si deseas modificar una fecha, debes clonar una fecha y utilizar los setters apropiados para hacer las modificaciones correspondientes:

const date = dayjs();
const alternativeDate = date.clone().year(2030);    // Usamos year() como setter
const alternativeDate2 = dayjs(date.year(2030));    // Equivalente al anterior
const year = date.year();                           // Usamos year() como getter

Tenemos una amplia cantidad de getters y setters en dayjs, entre los que podemos encontrar los siguientes:

Método Descripción
.year( value) Obtiene o cambia el año de la fecha utilizada.
.month( value) Obtiene o cambia el mes de la fecha utilizada. Empieza en 0.
.date( value) Obtiene o cambia el día de la fecha utilizada.
.day( value) Obtiene o cambia el día de la semana de la fecha utilizada.
.hour( value) Obtiene o cambia la hora de la fecha utilizada.
.minute( value) Obtiene o cambia los minutos de la fecha utilizada.
.second( value) Obtiene o cambia los segundos de la fecha utilizada.
.millisecond( value) Obtiene o cambia los milisegundos de la fecha utilizada.
.get( unit) Obtiene el valor de la unidad indicada por parámetro.
.set( unit, value) Cambia el valor de la unidad indicada por parámetro.

A través de plugins se pueden utilizar otros métodos como la semana del año (weekYear), el día del año (dayOfYear), el día del mes en formato alfabético (weekday), etc...

Fechas en diferentes idiomas

Con dayjs es muy sencillo formatear fechas en diferentes idiomas, como por ejemplo, en español. Para ello, primero debemos importar el idioma que queremos utilizar, y luego indicar a dayjs que vamos a utilizar dicho idioma. Se puede hacer de dos formas:

import dayjs from "dayjs";
import { es } from "dayjs/locale/es";

dayjs.locale("es");
const date = dayjs().format("DD/MMMM/YYYY");

De esta forma, con dayjs.locale("es") cargamos el idioma español de forma global importado en el módulo es de la linea anterior. Asi pues, todas las fechas que manipulemos después de dicha linea, aparecerán en el idioma seleccionado. Sin embargo, si lo hacemos de la siguiente forma, estaremos utilizando el idioma en la instancia concreta, por lo que solo afectará a ella:

import dayjs from "dayjs";
import { es } from "dayjs/locale/es";

const date = dayjs().locale("es").format("DD/MMMM/YYYY");

Las siguientes lineas donde manipulemos fechas, aparecerán en el idioma principal, ya que sólo hemos utilizado el idioma español para esa fecha date concreta.

Además, también podemos utilizar algunos datos locales de apoyo como nombres de los días de la semana o nombres del mes del año, simplemente importadno el plugin localeData:

import dayjs from "dayjs";
import { es } from "dayjs/locale/es";
import localeData from "dayjs/plugin/localeData";

dayjs.locale("es");
dayjs.extend(localeData);

dayjs.weekdays();       // ["domingo", "lunes", "martes", ..., "sábado"]
dayjs.weekdaysShort();  // ["dom.", "lun.", "mar.", ..., "sáb."]
dayjs.weekdaysMin();    // ["do", "lu", "ma", "mi", "ju", "vi", "sá"]
dayjs.monthsShort();    // ["ene", "feb", "mar", "abr", ..., "dic"]
dayjs.months();         // ["Enero", "Febrero", "Marzo", ..., "Diciembre"]

No olvides que tienes que importar la localización (es) y establecerla e importar el plugin localeData, y extender de él.

Manz
Publicado por Manz

Docente, divulgador informático y Streamer de código. Amante del CSS y de la plataforma web en general. Autor de Emezeta.com tiempo atrás. Ha trabajado como profesor en la Universidad de La Laguna y es director del curso de Programación web FullStack y FrontEnd de EOI en Tenerife. En sus ratos libres, busca GIF de gatos en Internet.