Formato delle date in JavaScript: builder ed esempi

Formato delle date in JavaScript

Formato delle date in JavaScript: builder Intl.DateTimeFormat ed esempi | We.Inc

Formatta le date in JavaScript senza librerie: un builder Intl.DateTimeFormat dal vivo, codice per YYYY-MM-DD e MM/DD/YYYY, fusi orari, tempo relativo, intervalli e le trappole del parsing dietro i bug del giorno sbagliato.

Per formattare una data in JavaScript, usa Intl.DateTimeFormat o toLocaleDateString con una locale e delle opzioni, per esempio date.toLocaleDateString("en-US", { dateStyle: "long" }) per March 5, 2026. Usa toISOString() per le API, l'opzione timeZone per mostrare un altro fuso orario e Intl.RelativeTimeFormat per frasi come 3 giorni fa.

Risposte rapide

Esigenza
Usa

Salvare o inviare una data
toISOString()

Mostrare una data alle persone
Intl.DateTimeFormat / toLocaleDateString

Un altro fuso orario
l'opzione timeZone

"3 giorni fa"
Intl.RelativeTimeFormat

Scegli una locale e le opzioni nel builder e copia il codice che genera; l'anteprima è formattata dal tuo stesso browser. Sotto trovi una tabella dei formati di tutti i giorni ed esempi eseguibili per fusi orari, tempo relativo e intervalli.

Scegli una locale, oppure scrivi qualsiasi tag BCP 47 come fr-CA.
Scegli uno stile predefinito, oppure imposta ogni parte separatamente.
Facoltativamente imposta un fuso orario e il formato a 12 o 24 ore.
Copia il codice generato nel tuo progetto.

Crea un solo Intl.DateTimeFormat e riusalo nei cicli; costruire un formatter è la parte lenta.
Salva e invia in UTC (stringhe ISO o timestamp) e converti nell'ora locale solo quando la mostri.
Passa la locale del visitatore (navigator.language) invece di fissare en-US quando il pubblico è internazionale.
Evita di fare il parsing di stringhe ambigue come 03/05/2026; costruisci le date da numeri o stringhe ISO.

Domande frequenti

Come formatto una data come YYYY-MM-DD in JavaScript?

Usa l'anno locale, il mese più uno e il giorno, completati con padStart(2, "0"), e uniscili con dei trattini. Anche toISOString().slice(0, 10) dà quella forma, ma in UTC, quindi vicino alla mezzanotte può mostrare il giorno sbagliato.

Perché la mia data è sbagliata di un giorno?

new Date("2026-03-05") viene letto come mezzanotte UTC. A ovest di Greenwich, quel momento in ora locale è ancora il giorno 4. Fai il parsing con un orario ("2026-03-05T00:00") oppure con new Date(2026, 2, 5) per ottenere la mezzanotte locale.

Mi serve ancora Moment.js?

Non per formattare. Intl copre locale, fusi orari e tempo relativo in ogni browser moderno. Gli stessi maintainer di Moment lo descrivono come un progetto legacy; per i calcoli sulle date funziona bene una piccola libreria come date-fns o la più recente API Temporal (dove disponibile).

Come mostro un orario in un fuso orario specifico?

Passa timeZone con un nome IANA, per esempio { timeZone: "America/New_York", timeStyle: "short" }. L'oggetto Date rimane lo stesso istante; cambia solo il modo in cui viene scritto.

Le date sul sito di un'attività

Orari di apertura, date degli eventi e date del blog devono corrispondere al modo in cui le scrivono i tuoi visitatori. Un pubblico britannico legge 05/03 come 5 marzo, uno statunitense come 3 maggio, quindi scrivi il mese per esteso (5 marzo 2026) ogni volta che il pubblico è misto.
Per le date leggibili dalle macchine, come in un elemento HTML time o nei dati strutturati, usa la forma ISO nell'attributo datetime e la forma leggibile come testo visibile.

Formati comuni

Formati comuni e il codice per ciascuno

Vuoi
Codice
Risultato (en-US, 5 marzo 2026, 14:07)

ISO 8601 per le API
d.toISOString()
Lo stesso momento in UTC, che termina con Z

YYYY-MM-DD in ora locale
d.toLocaleDateString("en-CA")

MM/DD/YYYY
d.toLocaleDateString("en-US", { month: "2-digit", day: "2-digit", year: "numeric" })

DD/MM/YYYY
d.toLocaleDateString("en-GB")

Data estesa
d.toLocaleDateString("en-US", { dateStyle: "long" })
March 5, 2026

Giorno della settimana e data
{ weekday: "long", month: "long", day: "numeric" }
Thursday, March 5

Ora, formato 12 ore
d.toLocaleTimeString("en-US", { timeStyle: "short" })
2:07 PM

Ora, formato 24 ore
{ hour: "2-digit", minute: "2-digit", hourCycle: "h23" }

Relativa
new Intl.RelativeTimeFormat("en", { numeric: "auto" }).format(-1, "day")

Esempi eseguibili

Fare il parsing delle date in sicurezza

Una stringa ISO con la sola data viene letta come mezzanotte UTC, mentre una stringa data e ora senza offset viene letta come ora locale. Questa differenza causa la maggior parte dei bug del giorno sbagliato.

YYYY-MM-DD senza librerie

Costruiscila dalle parti locali con padStart. Il trucco della locale en-CA dà lo stesso risultato ma dipende dal fatto che il formato di quella locale non cambi.

Lo stesso momento in diversi fusi orari

timeZone accetta un nome IANA. Il Date in sé non ha un fuso; cambia solo la formattazione. Nota che timeZoneName non si può combinare con dateStyle o timeStyle.

Tempo relativo (3 giorni fa, tra 2 ore)

Intl.RelativeTimeFormat scrive le parole; tu scegli l'unità. Questa funzione di supporto sceglie l'unità più grande che ci sta.

Intervalli di date

formatRange rimuove le parti ripetute, così una prenotazione dal 5 al 9 dello stesso mese si legge in modo naturale.

Layout personalizzati con formatToParts

Quando nessuno stile predefinito va bene, prendi i pezzi localizzati e disponili tu, per esempio per mostrare il giorno più grande del mese.

Lavori con i secondi epoch? Usa il

convertitore di timestamp Unix

Opzioni di Intl.DateTimeFormat usate nel builder

Opzione
Valori

(nessuno)

(il tuo fuso)

Errore: {msg}

Builder Intl.DateTimeFormat

Data e ora

Locale

Fuso orario

Modalità

Stili predefiniti

Scegli ogni parte

Copia il codice

Inizia gratis · Nessuna carta di credito richiesta

Correlati: Guide

Prodotto

Per chi è

Funzionalità

Risorse

Azienda

Mappa del sito