Moment.js: spiegazione completa ed esempi pratici della libreria di date

Informatec Digital » Modi di dire » Moment.js: spiegazione completa ed esempi pratici della libreria di date

Lavorare con date e orari in JavaScript può rivelarsi una vera e propria odissea per gli sviluppatori di applicazioni web.Fortunatamente, esistono strumenti come Moment.js che semplificano notevolmente questo processo, facilitando ogni cosa, dalla formattazione di base delle date alle complesse operazioni di manipolazione e convalida. Se ti è mai capitato di provare a convertire, confrontare o visualizzare correttamente le date nei tuoi progetti, Moment.js è probabilmente uno dei tuoi migliori alleati, o almeno dovresti prenderlo in considerazione.

In questo articolo ti racconterò tutto quello che devi sapere su Moment.js.: dalle sue funzionalità principali e dai trucchi meno noti, ai casi pratici e alla sua integrazione con altre librerie, inclusa una chiara spiegazione della sua sintassi e dei compiti che può risolvere. Esamineremo anche i suoi limiti, gli aggiornamenti recenti e le alternative disponibili se state cercando qualcosa di più moderno.

Cos'è Moment.js e perché è diventato così popolare?

Moment.js è una libreria JavaScript progettata per semplificare l'utilizzo di date e orari.Permette di creare, analizzare, manipolare e visualizzare date in qualsiasi formato immaginabile con una sintassi semplice e potente. Questa libreria è stata, per anni, La soluzione leader della comunità per superare le limitazioni dell'oggetto Date() nativo di JavaScript.

Il nucleo di Moment.js ruota attorno all'oggetto momento(), in grado di costruire date da quasi tutti gli input validi: stringhe di testo, oggetti Date, timestamp o persino argomenti numerici. Questo lo rende estremamente flessibile e utile in tutti i tipi di progetti, dai piccoli script alle applicazioni aziendali che gestiscono fusi orari internazionali o record storici.

Cosa ne ha decretato il successo? La sua affidabilità, la facilità d'uso e la varietà di strumenti e plugin inclusi.Anche quando il progetto è entrato in modalità di manutenzione, Moment.js vanta un'ampia base di utenti e una documentazione esaustiva., rafforzando la sua posizione come soluzione di riferimento per le date in JavaScript e Node.js.

Caratteristiche principali e vantaggi di Moment.js

• API semplice e intuitivaUno dei maggiori punti di forza di Moment.js è la sua sintassi chiara. È possibile eseguire operazioni semplici, come ottenere la data corrente o convertire una stringa in un formato specifico, o calcoli e convalide complesse in poche righe.
• Analisi e formattazione flessibiliAnalizzare stringhe di date di quasi tutti i formati e convertirle nell'output desiderato non è mai stato così facile. Moment.js semplifica e velocizza la formattazione delle date nelle presentazioni personalizzate..
• Manipolazione della data: Aggiungere o sottrarre giorni, mesi, anni, settimane o qualsiasi altra unità di tempo è semplice come usare i metodi Inserisci() y sottrarre()Questa funzionalità è molto utile quando si ha bisogno di lavorare con date relative, scadenze o intervalli di tempo che variano dinamicamente.
• Validazione robusta: Se hai bisogno di verificare se una data è valida o esiste (ad esempio, il 30 febbraio), Moment.js ti semplifica la vita. Il metodo è valido() È in grado di rilevare errori sottili nel formato o nella logica delle date.
• Supporto per fusi orari e localizzazione: Grazie al tuo plugin momento-fuso orarioConvertire le date tra diversi fusi orari è molto semplice. È anche possibile visualizzare le date adattate alla lingua dell'utente e alle convenzioni regionali, un aspetto fondamentale nelle applicazioni globali.
• Ecosistema di plugin: Oltre alla libreria principale, esiste un ecosistema di plugin per estenderne le funzionalità (calendario, compatibilità con altri framework, formati esotici...).

Come iniziare a usare Moment.js nel tuo progetto

L'installazione è molto semplicePuoi includere Moment.js nel tuo HTML con una sola riga:

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

Se si lavora con Node.js o un ambiente di sviluppo moderno, è comune installarlo tramite npm o yarn:

npm install moment

Una volta fatto questo, puoi importare Moment.js secondo la sintassi che usi:

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

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

Creare date: diversi modi ed esempi pratici

Crea facilmente date

Per ottenere la data e l'ora correnti, usare semplicemente moment():

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

È possibile costruire una data specifica passando argomenti:

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

È anche possibile partire da una stringa e un formato dati, anche in modalità rigorosa:

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

Hai un oggetto Date nativo?

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

Formattazione e visualizzazione delle date

Moment.js consente di visualizzare le date in qualsiasi formato immaginabileAd esempio, per visualizzare la data corrente come giorno/mese/anno:

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

Se desideri una catena più umanizzata, puoi usare:

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

Alcuni token utili per la formattazione:

• YYYY: anno a 4 cifre
• MM: mio
• DD: giorno del mese
• hh o HH: ora (formato 12h o 24h)
• mm: minuti
• ss: secondi
• a: am/pm

Ad esempio, per visualizzare solo l'ora:

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

Formattazione avanzata con token e supporto regionale

Moment.js supporta molteplici formati localizzati e traduzioniÈ possibile cambiare lingua al volo per visualizzare i nomi dei mesi e dei giorni in un'altra lingua:

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

Manipolazione delle date: addizione, sottrazione e confronto

Lavorare con date relative è uno dei punti di forza di Moment.js.

• Aggiungi giorni, mesi o anni:

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

• Sottrai unità:

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

• Inizio e fine dei periodi:

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

Convalida le date e rileva gli errori

Prima di operare con le date è fondamentale convalidarne la correttezza:

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

questo Evita bug inaspettati nelle applicazioni che ricevono date dall'utente.

Confronto date: controlla se una data è tra le altre

Moment.js include diversi metodi per confrontare le date:

• èPrima(): Controlla se una data è precedente a un'altra.
• èDopo(): Controlla se una data è successiva.
• èTra(): Indica se una data è compresa tra due date specificate.

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

Gestione dei fusi orari e delle date internazionali

Quando si lavora con utenti in diverse parti del mondo, i fusi orari possono diventare una trappola.Con il plugin momento-fuso orario Puoi convertire facilmente le date tra regioni:

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"

Inoltre, Moment.js è in grado di presentare date adattate alle impostazioni locali dell'utente., che mostra i nomi dei mesi e dei giorni tradotti correttamente.

Esempi di utilizzo chiave e suggerimenti avanzati

Ottieni le differenze tra le date

È possibile calcolare il tempo trascorso tra due date in unità diverse:

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

Date relative e tempi umani

Moment.js è ottimo per visualizzare messaggi come "3 giorni fa" o "tra 5 ore":

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

Calendario umano

La funzione calendario() Visualizza date relative come "ieri alle 17:00" o "domani alle 9:00", il che lo rende molto utile per le app di calendario.

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

Supporto per salti di anno e giorni speciali

Vuoi sapere se un anno è bisestile?

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

Il metodo èanno bisestile() ti dà la risposta direttamente.

Personalizzazione avanzata: formati, token e analisi rigorosa

Moment.js consente di lavorare con stringhe e token personalizzati per creare o leggere date in una moltitudine di formatiInoltre, la modalità rigorosa richiede corrispondenze esatte, evitando errori sottili e sorprese indesiderate.

Ad esempio, per analizzare una data nel formato "giorno/mese/anno":

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

Elenco di token comuni ed esempi

• Anno: AAAA (2024), AA (24), A (-500)
• mese: MM (01 – 12), MMM (Gen), MMMM (Gennaio)
• Giorno: DD (01 – 31), C (1° – 31°)
• Tempo: HH (00 – 23), hh (01 – 12), mm (minuti), ss (secondi)
• Fuso orario: Z, ZZ

Questi token possono essere combinati per creare output completamente personalizzati. Consultare la documentazione per l'elenco completo e i casi speciali.