Moment.js: Explicació completa i exemples pràctics de la llibreria de dates

Informatec Digital » llenguatges » Moment.js: Explicació completa i exemples pràctics de la llibreria de dates

Treballar amb dates i hores en JavaScript pot ser una autèntica odissea per als que desenvolupen aplicacions web . Per sort, hi ha eines com Moment.js que simplifiquen considerablement aquest procés, facilitant des del formateig bàsic de dates fins a operacions complexes de manipulació i validació. Si mai t'has sentit frustrat intentant convertir, comparar o mostrar dates correctament en els teus projectes, probablement Moment.js hagi estat entre els teus principals aliats o, almenys, ho hauries de considerar.

En aquest article t'explico tot el que necessites saber sobre Moment.js : des de les seves funcions principals i trucs menys coneguts, fins a casos pràctics i la seva integració amb altres llibreries, passant per una explicació clara de la seva sintaxi i les tasques que hi pots solucionar. També veurem les seves limitacions, actualitzacions recents i quines alternatives tens en cas de buscar alguna cosa més moderna.

Què és Moment.js i per què s'ha tornat tan popular?

Moment.js és una biblioteca de JavaScript dissenyada perquè treballar amb dates i hores no sigui un maldecap . Permet crear, analitzar, manipular i mostrar dates en qualsevol format imaginable amb una sintaxi senzilla i potent. Aquesta llibreria ha estat durant anys la principal solució de la comunitat per superar les limitacions de l'objecte Date() nadiu de JavaScript.

El nucli de Moment.js gira al voltant de l'objecte moment() , que és capaç de construir dates a partir de gairebé qualsevol entrada vàlida: cadenes de text, objectes Date, timestamps o directament amb arguments numèrics. Això ho fa extremadament flexible i útil en tota mena de projectes, des de petits scripts fins a aplicacions empresarials que gestionen horaris internacionals o registres històrics.

Què l'ha feta triomfar? La seva fiabilitat, facilitat d'ús i la varietat d'eines i plugins que l'acompanyen . Fins i tot quan el projecte ha entrat en mode manteniment, Moment.js manté una gran base d'usuaris i una documentació extensa , cosa que reforça la seva posició com a solució de referència per a dates en JavaScript i Node.js.

Principals característiques i avantatges de Moment.js

• API simple i intuïtiva: Una de les grans cartes de Moment.js és la seva sintaxi clara. Pots fer des d'operacions senzilles, com ara obtenir la data actual o convertir un string a un format específic, fins a fer càlculs complexos i validacions en un parell de línies.
• Parseig i formateig flexible: Analitzar cadenes de dates de gairebé qualsevol format i convertir-les a la sortida desitjada mai no ha estat tan fàcil. Moment.js permet formatar dates en presentacions customitzades molt ràpid i sense complicacions.
• Manipulació de dates: Sumar o restar dies, mesos, anys, setmanes, o qualsevol altra unitat de temps és tan senzill com fer servir els mètodes add () y subtract(). Això és molt útil quan necessites treballar amb dates relatives, venciments o terminis que varien dinàmicament.
• Validació robusta: Si necessites comprovar si una data és vàlida o si existeix (per exemple, el 30 de febrer), Moment.js t'ho posa a la safata. El mètode és vàlid() és capaç de detectar errors subtils en el format o lògica de les dates.
• Suport per a zones horàries i localització: Gràcies al vostre plugin moment-timezone, és molt senzill convertir dates entre diferents fusos horaris. A més, pots presentar dates adaptades als idiomes i convencions regionals de l'usuari, cosa que és clau en aplicacions globals.
• Ecosistema de plugins: Al marge de la llibreria principal, hi ha un ecosistema de plugins per ampliar la seva funcionalitat (calendari, compatibilitat amb altres frameworks, formats exòtics…).

Com començar a utilitzar Moment.js al teu projecte

La instal·lació és molt directa . Pots incloure Moment.js al teu HTML amb una sola línia:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

Si treballes amb Node.js o un entorn de desenvolupament modern, el més habitual és instal·lar-lo mitjançant npm o yarn:

npm install moment

Un cop fet això, pots importar Moment.js segons la sintaxi que utilitzis:

// Versión CommonJS
var moment = require('moment');
moment().format();

// ES6
import moment from 'moment';
moment().format();

Creació de dates: diferents formes i exemples pràctics

Crear dates fàcilment

Per obtenir la data i hora actual, utilitza simplement moment():

console.log(moment()); // Devuelve la fecha actual en formato ISO8601

Pots construir una data específica passant arguments:

moment("2022-10-14"); // Crea el 14 de octubre de 2022

També pots partir d'una cadena i un format donat, fins i tot en mode estricte:

moment("25/12/1995", "DD/MM/YYYY", true); // Analiza y comprueba el formato

Tens un objecte Date nativo?

const fechaJS = new Date();
const miFecha = moment(fechaJS);

Formateig i presentació de dates

Moment.js permet mostrar dates en qualsevol format imaginable . Per exemple, per mostrar la data actual com a dia/mes/any:

moment().format('DD/MM/YYYY');

Si vols una cadena més humanitzada, pots fer servir:

moment().format('MMMM Do YYYY, h:mm:ss a'); // Ejemplo: "marzo 8º 2024, 3:21:10 pm"

Alguns tokens útils per al formateig :

• YYYY: any de 4 xifres
• MM: mes
• DD: dia del mes
• hh o HH: hora (format 12h o 24h)
• mm: minuts
• ss: segons
• a: am/pm

Per exemple, per mostrar només l'hora:

moment().format('HH:mm:ss');

Formateig avançat amb tokens i suport regional

Moment.js suporta múltiples formats localitzats i traduccions . És possible canviar d'idioma sobre la marxa per mostrar noms de mesos i dies en un altre idioma:

moment.locale('es'); // Cambia a español
document.write(moment().format('LLLL'));
// Ejemplo: martes, 8 de marzo de 2024 15:21

Manipulació de dates: sumes, restes i comparacions

Treballar amb dates relatives és una de les fortaleses de Moment.js.

• Sumar dies, mesos o anys:

  moment().add(3, 'days').format('DD/MM/YYYY');

• Restar unitats:

  moment().subtract(2, 'months').format('DD/MM/YYYY');

• Inici i fi de períodes:

  moment().startOf('month').format('DD/MM/YYYY'); // Primer día del mes
  moment().endOf('month').format('DD/MM/YYYY');   // Último día del mes

Validar dates i detectar errors

Abans d'operar amb dates és vital validar que siguin correctes:

moment('2024-02-30', 'YYYY-MM-DD').isValid(); // false, el 30 de febrero no existe

Això evita errors inesperats en aplicacions que reben dates de l'usuari.

Comparació de dates: comprovar si una data està entre d'altres

Moment.js incorpora diversos mètodes per comparar dates:

• ésAbans(): Comprova si una data és anterior a una altra.
• isAfter(): Comprova si una data és posterior.
• isBetween(): Indica si una data està entre dues dades.

let hoy = moment();
let ayer = moment().subtract(1, 'days');
console.log(hoy.isAfter(ayer)); // true

Maneig de zones horàries i dates internacionals

Quan treballes amb usuaris a diferents parts del món, les zones horàries poden convertir-se en un parany . Amb el plugin moment-timezone pots convertir fàcilment dates entre regions:

const moment = require('moment-timezone');
const fechaUTC = moment('2024-05-25');
const fechaNY = fechaUTC.tz('America/New_York').format('YYYY-MM-DD HH:mm:ss');
console.log(fechaNY);
// Ejemplo: "2024-05-24 20:00:00"

A més, Moment.js és capaç de presentar dates adaptades a la configuració regional de l'usuari , mostrant noms de mesos i dies correctament traduïts.

Exemples dús clau i trucs avançats

Obtenir diferències entre dates

Pots calcular el temps transcorregut entre dues dates en diferents unitats:

let inicio = moment('2024-01-01');
let fin = moment('2024-03-08');
let dias = fin.diff(inicio, 'days'); // Devuelve el número de días entre ambas

Dates relatives i temps humans

Moment.js és ideal per mostrar missatges del tipus "fa 3 dies" o "en 5 hores":

moment().subtract(3, 'days').fromNow(); // "hace 3 días"
moment().add(2, 'hours').fromNow();    // "en 2 horas"

Calendari humà

La funció calendar() mostra dates relatives com ahir a les 17:00, demà a les 9:00, fent-ho molt usable per a apps d'agenda.

moment().subtract(1, 'days').calendar(); // "Ayer a las..."
moment().add(3, 'days').calendar();     // "Próximo martes a las..."

Suport per a salts d´any i dies especials

Vols saber si un any és de traspàs?

moment([2024]).isLeapYear(); // true

El mètode isLeapYear() us dóna la resposta de forma directa.

Personalització avançada: formats, tokens i parseig estricte

Moment.js permet treballar amb cadenes i tokens personalitzats per crear o llegir dates d'infinitat de formats . A més, la manera estricta exigeix ​​coincidències exactes, evitant errors subtils i sorpreses indesitjades.

Per exemple, per analitzar una data en el format «dia/mes/any»:

moment('12/03/2023', 'DD/MM/YYYY', true);

Llistat de tokens habituals i exemples

• Any: YYYY (2024), YY (24), I (-500)
• mes: MM (01 – 12), MMM (Jan), MMMM (January)
• Dia: DD (01 – 31), Do (1st – 31st)
• Hora: HH (00 – 23), hh (01 – 12), mm (minuts), ss (segons)
• zona horària: Z, ZZ

Aquests tokens es poden combinar per compondre sortides totalment personalitzades. Consulta la documentació per veure la llista completa i casos especials.