Articolo originale: How to Format Dates in JavaScript with One Line of Code di Joel Olawanle

Tradotto e adattato da: Dario Di Cillo

Per molto tempo, ho utilizzato librerie come Date-fns ogni volta  che ho avuto bisogno di formattare delle date in JavaScript, anche se diventa una cosa un po' stramba se si tratta di farlo in piccoli progetti che richiedono formati di date che JavaScript offre già di default.

Ho scoperto che la maggior parte degli sviluppatori agisce in questo modo e ho pensato che fosse il modo migliore finché non mi sono reso conto che non abbiamo sempre bisogno di utilizzare delle librerie per formattare le date in JavaScript.

Se sei curioso di provare, ecco il codice:👇

new Date().toLocaleDateString('en-us', { weekday:"long", year:"numeric", month:"short", day:"numeric"}) 
// "Friday, Jul 2, 2021"

Dopo averlo provato nel tuo codice e aver verificato che funziona, cerchiamo di capire come funziona e di imparare qualche altro modo per formattare le date in JavaScript con una solo riga di codice.

Come formattare la date in JS

Ottenere delle date in JavaScript, di solito, non è un problema, ma formattarle in modo che si adattino al tuo progetto può essere macchinoso per i principianti. Per questo motivo, la maggior parte delle persone finisce per utilizzare delle librerie.

Il metodo più utilizzato per ottenere la data in  JavaScript è l'oggetto new Date().

Di default, quando esegui new Date() sul tuo terminale, il fuso orario del tuo browser viene utilizzato per mostrare la data come una stringa di testo, ad esempio: Fri Jul 02 2021 12:44:45 GMT+0100 (British Summer Time).

Ma avere qualcosa del genere nella tua applicazione non è professionale né semplice da leggere, spingendoti a cercare modi migliori per formattare le date.

Diamo un'occhiata ai metodi che operano su un oggetto date.

ADVERTISEMENT

Metodi per date in JavaScript

Ci sono tantissimi metodi che puoi applicare a un oggetto date. Puoi usare questi metodi per ottenere informazioni dall'oggetto. Eccone alcuni:

  • getFullYear() – ottiene l'anno come numero a quattro cifre (aaaa)
  • getMonth() – ottiene il mese come numero (0-11)
  • getDate() – ottiene il giorno come numero (1-31)
  • getHours() – ottiene l'ora (0-23)

E ce ne sono molti altri…

Sfortunatamente, la maggior parte di questi metodi necessita di parecchio codice per convertire le date nel formato desiderato.

Ad esempio, new Date().getMonth() restituisce 6, che sta per luglio. Per usare luglio nel mio progetto, avrò bisogno di un codice come quello qui sotto, che può essere un po' complicato:

const currentMonth = new Date();
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
console.log(months[currentMonth.getMonth()]);

Vediamo due metodi che puoi utilizzare per formattare le date nel modo migliore, così da poterli sfruttare all'interno dei tuoi progetti.

ADVERTISEMENT

Il metodo toDateString() in JavaScript

Il metodo JavaScript toDateString() restituisce la parte della data di un oggetto date in forma di una stringa con il seguente formato:

  1. Le prime tre lettere del giorno della settimana
  2. Le prime tre lettere del mese
  3. Due cifre per il giorno del mese, con lo zero a sinistra se necessario
  4. Quattro cifre per l'anno (almeno)
new Date().toDateString();
//"Fri Jul 02 2021"

Lo svantaggio principale di questo metodo è l'impossibilità di manipolare l'output nel modo che desideriamo.

Ad esempio, non ci permette di mostrare le date in base alla lingua. Ora, esploriamo un altro metodo che, secondo me, è uno dei migliori.

ADVERTISEMENT

Il metodo toLocaleDateString() in JavaScript

Questo metodo restituisce un oggetto date come stringa usando le convenzioni locali. Accetta come argomento anche delle opzioni che ti permettono di personalizzare la funzione.

Sintassi:

toLocaleDateString()
toLocaleDateString(locales)
toLocaleDateString(locales, options)

Diamo un'occhiata a qualche esempio con degli output:

const currentDate = new Date();

const options = { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' };

console.log(currentDate.toLocaleDateString('de-DE', options));
//Freitag, 2. Juli 2021

console.log(currentDate.toLocaleDateString('ar-EG', options))
// الجمعة، ٢ يوليو ٢٠٢١

console.log(currentDate.toLocaleDateString('en-us', options));
//Friday, Jul 2, 2021


Puoi anche decidere di non utilizzare locales o options:

new Date().toLocaleDateString()
// "7/2/2021"

E puoi decidere anche di usare soltanto locales. L'output sarà come il precedente, basato sul fuso orario del browser.

new Date().toLocaleDateString('en-US')
"7/2/2021"

Puoi anche decidere di riorganizzare le opzioni come desideri. Le opzioni di base sono quattro:

  • weekday – genera l'output con il giorno della settimana in forma abbreviata o estesa (rispettivamente short e long).
  • year – restituisce l'anno come un numero
  • month – restituisce il mese in forma abbreviata o estesa (rispettivamente short e long).
  • day – restituisce il giorno come numero
new Date().toLocaleDateString('en-us', { weekday:"long", year:"numeric", month:"short"}) // "Jul 2021 Friday"

new Date().toLocaleDateString('en-us', { year:"numeric", month:"short"})
// "Jul 2021"
ADVERTISEMENT

In conclusione

L'oggetto date ha sette metodi di formattazione, ognuno dei quali restituisce un valore specifico:

  1. toString() restituisce Fri Jul 02 2021 14:03:54 GMT+0100 (British Summer Time)
  2. toDateString() restituisce Fri Jul 02 2021
  3. toLocaleString() restituisce 7/2/2021, 2:05:07 PM
  4. toLocaleDateString() restituisce 7/2/2021
  5. toGMTString() restituisce Fri, 02 Jul 2021 13:06:02 GMT
  6. toUTCString() restituisce Fri, 02 Jul 2021 13:06:28 GMT
  7. toISOString() restituisce 2021-07-02T13:06:53.422Z

Se stai cercando dei formati di data più avanzati, allora avrai bisogno di creare un formato personalizzato.

Grazie per aver letto questo articolo!