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ò essere una vera sfida per gli sviluppatori web . Fortunatamente, strumenti come Moment.js semplificano notevolmente questo processo, rendendo molto più facili operazioni che vanno dalla formattazione di base delle date a manipolazioni e validazioni complesse. Se vi è mai capitato di sentirvi frustrati cercando di convertire, confrontare o visualizzare correttamente le date nei vostri progetti, Moment.js è probabilmente uno dei vostri migliori alleati, o quantomeno dovreste prenderlo in considerazione.

In questo articolo, ti spiegherò tutto ciò che devi sapere su Moment.js : dalle sue funzioni principali ai trucchi meno conosciuti, fino ad esempi pratici e alla sua integrazione con altre librerie, inclusa una chiara spiegazione della sua sintassi e delle attività che puoi svolgere con esso. Analizzeremo anche i suoi limiti, gli aggiornamenti recenti e le alternative disponibili se stai cercando qualcosa di più moderno.

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

Moment.js è una libreria JavaScript progettata per semplificare al massimo la gestione di date e orari . Permette di creare, analizzare, manipolare e visualizzare date in praticamente qualsiasi formato immaginabile, con una sintassi semplice ma potente. Per anni, questa libreria è stata la soluzione principale della community per superare i limiti dell'oggetto Date() nativo di JavaScript.

Il fulcro di Moment.js ruota attorno all'oggetto `moment()` , in grado di costruire date a partire da quasi qualsiasi input valido: stringhe di testo, oggetti Date, timestamp o direttamente con argomenti numerici. Questo lo rende estremamente flessibile e utile in ogni tipo di progetto, dai piccoli script alle applicazioni aziendali che gestiscono fusi orari internazionali o dati storici.

Qual è il segreto del suo successo? L'affidabilità, la facilità d'uso e la varietà di strumenti e plugin disponibili . Anche quando il progetto è entrato in modalità di manutenzione, Moment.js mantiene un'ampia base di utenti e una documentazione esaustiva , consolidando la sua posizione di soluzione leader per la gestione delle 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 semplice . Puoi includere Moment.js nel tuo codice 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 immaginabile . Ad 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 diversi 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

Ciò previene bug imprevisti 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 essere un vero grattacapo . Con il plugin moment-timezone , è possibile convertire facilmente le date tra le diverse 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 visualizzare le date adattate alle impostazioni regionali dell'utente , mostrando 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 calendar() visualizza date relative come "ieri alle 17:00", "domani alle 9:00", risultando quindi molto utile per le applicazioni 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 isLeapYear() fornisce direttamente la risposta.

Personalizzazione avanzata: formati, token e analisi rigorosa

Moment.js consente di lavorare con stringhe e token personalizzati per creare o leggere date in innumerevoli formati . Inoltre, la modalità rigorosa richiede corrispondenze esatte, prevenendo 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.