Webtutoriales.com

WebTutoriales

Categorías
Inicio
/
Artículos
javascript

Fecha y hora con Day.js

Gestiona la fecha y las horas en Javascript usando Day.js, librería que sólo ocupa 2kB.

Fecha y hora Day.js

En Javascript podemos usar el objeto Date para gestionar fechas y horas, pero a medida que necesitemos operaciones más complejas el trabajo se vuelve más farragoso. Aunque existen varias alternativas, Day.JS es una librería sólida, que ocupa poco espacio y de uso bastante común. Además, si en el pasado usaste librerías antiguas como Moment.js, la sintaxis es muy parecida, por lo que es ideal en muchos aspectos.

Instalación de la dependencia

Integrar de Day.js en un proyecto es muy sencillo. Puedes empezar ejecutando el siguiente comando en tu terminal según utilizes npm, yarn o pnpm:

npm install dayjs

o bien,

yarn add dayjs

o bien,

pnpm add dayjs

Una vez instalado, puedes importarlo y comenzar a utilizar Day.js en tu aplicación. Si utilizas ES 2015:

import dayjs from 'dayjs'

o bien,

const dayjs = require('dayjs')

Ejemplos básicos

El uso de esta librería es muy intuitivo. Veamos algunos ejemplos básicos para entender su sintaxis.

Obtener el objeto Date nativo

La función dayjs() nos devuelve un objeto con el formato de Day JS, si deseamos obtener el equivalente al objeto nativo Date de Javascript, podemos usar el método toDate()

dayjs().toDate()

Sumar días a una fecha:

const sumarDia = dayjs().add(1, 'day')

Restar días a una fecha:

const sumarDia = dayjs().subtract(1, 'day')

Para dar formato a una fecha

const fechaFormateada = dayjs().format('DD/MM/YYYY')

Formato

  • YY, 23, año en dos dígitos
  • YYYY 2023, año en cuatro dígitos
  • M 1-12, mes empezando en 1
  • MM 01-12, mes en dos dígitos
  • MMM Jan-Dec, mes abreviado
  • MMMM January-December, mes completo
  • D 1-31, día del mes
  • DD 01-31, día del mes, dos dígitos
  • d 0-6, día de la semana, con Domingo en 0
  • dd Su-Sa, día de la semana en su menor expresión
  • ddd Sun-Sat, día de la semana abreviado
  • H 0-23, hora
  • HH 00-23, hora, dos dígitos
  • h 1-12, hora, en formato de 12 horas
  • hh 01-12, hora, en formato de 12 horas, dos dígitos
  • m 0-59, minuto
  • mm 00-59, minuto, dos dígitos
  • s 0-59, segudo
  • ss 00-59, segundo, dos dígitos
  • SSS 000-999, milisegundos, tres dígitos
  • Z +05:00 horas desplazadas de UTC, ±HH:mm
  • ZZ +0500 horas desplazadas de UTC, ±HH:mm
  • A AM PM
  • a am pm

Formato según el idioma

Hay ciertos formatos comunes que pueden ser localizados en cada idioma.

Requiere un plugin:

import * as localizedFormat from 'dayjs/plugin/localizedFormat';
dayjs.extend(localizedFormat);

dayjs('01-02-2023').format('L'); 
// '01/02/2021'

dayjs('01-02-2023 23:59:59').format('LTS');
// '11:59:59 PM'

Tipos de formato:

  • formato: LT, cadena en inglés: h:mm A -> 8:02 PM
  • formato: LTS, cadena en inglés: h:mm:ss A -> 8:02:18 PM
  • formato: L, cadena en inglés: MM/DD/YYYY -> 08/16/2023
  • formato: LL, cadena en inglés: MMMM D, YYYY -> August 16, 2023
  • formato: LLL, cadena en inglés: MMMM D, YYYY h:mm A -> August 16, 2023 8:02 PM
  • formato: LLLL, cadena en inglés: dddd, MMMM D, YYYY h:mm A -> Thursday, August 16, 2023 8:02 PM
  • formato: l, cadena en inglés: M/D/YYYY -> 8/16/2023
  • formato: ll, cadena en inglés: MMM D, YYYY -> Aug 16, 2023
  • formato: lll, cadena en inglés: MMM D, YYYY h:mm A -> Aug 16, 2023 8:02 PM
  • formato: lll, cadena en inglés: ddd, MMM D, YYYY h:mm A -> Thu, Aug 16, 2023 8:02 PM

Comparar si una fecha es anterior a otra

const fecha1 = dayjs('2023-12-21')
const fecha2 = dayjs('2024-01-01')
const esAnterior = fecha1.isBefore(fecha2) // Devolverá true

Diferencia entre dos fechas

const fecha1 = dayjs('2023-02-24')
const fecha2 = dayjs('2021-07-07')

const diferenciaEnMilisegundos = fecha1.diff(fecha2)
console.log(diferenciaEnMilisegundos)

Si luego queremos, podemos transformar los milisegundos en otras unidades, por ejemplo, para saber la diferencia en meses:

fecha1.diff(fecha2, 'month')

Las denominaciones disponibles son:

  • days
  • weeks
  • quarters
  • months
  • years
  • hours
  • seconds
  • milliseconds

startOf y endOf

Métodos que devuelven el inicio o final de la unidad especificada, por ejemplo:

dayjs().startOf('year').toDate();
// Sun Jan 01 2023 00:00:00

dayjs().endOf('year').toDate();
// Sun Dec 31 2023 23:59:59

Modificar valores

Podemos modificar cualquier valor de una fecha especificada, por ejemplo:

dayjs('1-1-2023').year(2021).toDate();
// Fri Jan 01 2021 00:00:00

dayjs('1-1-2023').date(31).hour(23).minutes(59).seconds(59).toDate();
// Sun Jan 31 2023 23:59:59

Interpretar cadenas de texto

Si queremos transformar una cadena de texto a fecha, debemos importar un pluugin:

import * as customParseFormat from 'dayjs/plugin/customParseFormat';
dayjs.extend(customParseFormat);

dayjs('06/02/95 2:00:00 PM -05:00', 'MM/DD/YY H:mm:ss A Z');
// Sun Jun 05 1995 20:00:00 GMT+0100

Traducir a otro idioma

Se requiere importar un plugin

import 'dayjs/locale/en-gb';
import * as localizedFormat from 'dayjs/plugin/localizedFormat';
dayjs.extend(localizedFormat);

dayjs().locale('en-us').format('ll'); // Dec 21, 2023
dayjs().locale('en-gb').format('ll'); // 21 Dec 2023

Conclusión

Day.js ofrece muchas funcionalidades para facilitar el trabajo de manipulación de fechas y horas, además puede extenderse con plugins y usar diferentes idiomas. Recomendamos visitar la página oficial para acceder a toda la documentación.

© 2004-2024. WebTutoriales.com