Formatear fechas con dayjs

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.

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.

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

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:

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.

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:

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:

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