W3docs

JavaScript: Date e Orario

Nello sviluppo web, capire e gestire date e orari è fondamentale per creare applicazioni dinamiche e orientate all'utente con JavaScript.

Introduzione all'oggetto Date di JavaScript

Comprendere e manipolare date e orari è fondamentale per creare applicazioni web dinamiche. JavaScript offre un oggetto integrato Date per gestire queste operazioni. Questa guida spiega come creare date, leggere e modificare le loro componenti, formattarle ed eseguire operazioni aritmetiche sulle date — con esempi eseguibili lungo tutto il percorso.

Internamente, un oggetto Date è semplicemente un numero: il conteggio dei millisecondi dall'epoca Unix (00:00:00 UTC del 1° gennaio 1970). Ogni altra funzionalità è costruita su quel singolo numero, quindi gran parte della logica sulle date si riduce a ordinarie operazioni matematiche sui numeri.

Creazione di oggetti Date

Esistono quattro modi comuni per istanziare un oggetto Date, ciascuno per un tipo di input diverso.

// 1. Current date and time (no arguments)
const now = new Date();

// 2. From a millisecond timestamp (epoch = 0)
const epoch = new Date(0); // 1970-01-01T00:00:00.000Z

// 3. From a date string (ISO 8601 is the only reliably portable format)
const parsed = new Date("2024-01-01T00:00:00");

// 4. From individual components: year, monthIndex, day, hours, minutes, seconds
const detailed = new Date(2024, 0, 1, 15, 30, 0); // Jan 1, 2024, 15:30:00
Attenzione

Il mese è indicizzato a partire da 0. Nella forma con componenti, gennaio è 0, febbraio è 1, … dicembre è 11. Il giorno del mese, al contrario, è basato su 1. Questo sfasamento di uno è il bug più comune con l'oggetto Date. La stessa indicizzazione da 0 si applica a getMonth() e setMonth().

Parsing di stringhe ISO rispetto ad altri formati

Solo il formato ISO 8601 (YYYY-MM-DDTHH:mm:ss.sssZ) ha la garanzia di essere interpretato nello stesso modo in ogni engine. Una stringa di data senza ora come "2024-01-01" viene trattata come mezzanotte UTC, mentre "2024-01-01T00:00:00" (senza Z) viene trattata come ora locale. Altri formati (es. "01/02/2024") dipendono dall'implementazione — meglio evitarli.

javascript— editable

Recupero delle componenti di data e ora

Una volta ottenuto un oggetto Date, è possibile leggere ciascuna parte con un metodo get*. Questi restituiscono valori nell'ora locale (vedi Utilizzo dei fusi orari per le varianti UTC).

javascript— editable

Impostazione delle componenti di data e ora

Ogni metodo get* ha un corrispondente metodo set* che modifica la data direttamente. Gli oggetti Date sono mutabiliset* cambia l'oggetto originale invece di restituirne uno nuovo.

javascript— editable

Autocorrezione (l'overflow viene riportato correttamente)

Se si imposta un valore fuori intervallo, Date lo normalizza silenziosamente — non viene generato alcun errore. Impostare il giorno 32 di gennaio fa avanzare la data a febbraio. Questo è particolarmente utile per le operazioni aritmetiche: per aggiungere 5 giorni, basta sommare 5 a getDate() e lasciare che la data scorra in avanti.

javascript— editable

Timestamp: getTime e Date.now

getTime() restituisce la data come timestamp in millisecondi, e il metodo statico Date.now() restituisce il timestamp corrente senza creare un oggetto. I timestamp sono il modo più semplice per confrontare date o misurare il tempo trascorso.

javascript— editable

Utilizzo dei fusi orari

Un oggetto Date memorizza un singolo istante UTC; i metodi get* lo leggono nel fuso orario locale dell'host. Utilizzare le varianti getUTC* per leggere il valore UTC, e l'API Intl (tramite toLocaleString) per visualizzare qualsiasi altro fuso orario.

javascript— editable

Formattazione di date e orari

Per produrre una stringa leggibile da una macchina si usa toISOString(); per un output leggibile dall'utente, toLocaleDateString() / toLocaleTimeString() rispettano il locale dell'utente. Per un formato completamente personalizzato, si assemblano le parti manualmente (ricordando getMonth() + 1).

javascript— editable
Informazione

toISOString() è esattamente ciò che JSON.stringify usa per le date, quindi un oggetto Date sopravvive a un ciclo di conversione in testo e ritorno. Vedi Lavorare con JSON per come trasformare le stringhe ISO in oggetti Date.

Informazione

Esplora le librerie moderne per le date: sebbene l'oggetto nativo Date di JavaScript fornisca una gestione di base delle date, librerie come date-fns e Luxon offrono utilità robuste per calcoli complessi, internazionalizzazione e gestione dei fusi orari. Moment.js è ufficialmente deprecato; considera queste alternative moderne per i nuovi progetti.

Aritmetica sulle date e calcolo delle differenze

Poiché un oggetto Date è internamente un numero, sottrarre una data dall'altra restituisce la differenza in millisecondi. L'operatore di sottrazione costringe ciascuna data tramite getTime(), quindi endDate - startDate funziona direttamente. Dividendo per i millisecondi in un giorno si ottiene il numero di giorni.

javascript— editable

Per aggiungere tempo, è preferibile usare set* (che gestisce correttamente l'overflow di mesi e anni) piuttosto che sommare millisecondi grezzi, che ignora i cambiamenti dell'ora legale.

javascript— editable

Utilizzo delle librerie per manipolazioni avanzate

Per manipolazioni e formattazioni di date più complesse, diverse librerie possono semplificare queste operazioni. Librerie come date-fns e Luxon offrono funzionalità estese rispetto all'oggetto nativo Date, facilitando operazioni come il parsing, l'internazionalizzazione e la gestione di fusi orari complessi. Inoltre, la Temporal API è attualmente in sviluppo e mira a sostituire nel tempo l'oggetto nativo Date con una soluzione più robusta, immutabile e consapevole dei fusi orari.

Conclusione

Padroneggiare l'oggetto Date in JavaScript è essenziale per sviluppare applicazioni web dinamiche che interagiscono efficacemente con date e orari. Attraverso la creazione, il recupero, la modifica e la formattazione delle date, gli sviluppatori possono costruire funzionalità sofisticate che rispondono al tempo reale. Che si tratti di pianificare eventi, calcolare durate o visualizzare linee temporali, le capacità offerte dall'oggetto Date di JavaScript e dalle varie librerie di terze parti rendono la manipolazione di date e orari uno strumento potente nel proprio arsenale di sviluppo web.

Pratica

Pratica
Quale dei seguenti metodi può essere utilizzato per estrarre le varie componenti di una data JavaScript?
Quale dei seguenti metodi può essere utilizzato per estrarre le varie componenti di una data JavaScript?
Was this page helpful?