JavaScript Date Now – Come ottenere la data corrente in JavaScript

Articolo originale: https://www.freecodecamp.org/news/javascript-date-now-how-to-get-the-current-date-in-javascript/

Molte applicazioni che crei avranno una sorta di componente che abbia a che fare con una data, che si tratti della data di creazione di una risorsa o della marca temporale di un'attività.

Gestire la formattazione di una data e di un orario, può essere estenuante. In questa guida imparerai come ottenere la data corrente in vari formati in JavaScript.

Oggetto Data di JavaScript

JavaScript ha l'oggetto integrato Date  che memorizza la data e l'ora e fornisce metodi per gestirle.

Per creare una nuova istanza dell'oggetto Date, utilizza la parola chiave new:

const date = new Date();

L'oggetto Date contiene un Number che rappresenta i millisecondi trascorsi dall'Epoca, ovvero dal 1 gennaio 1970.

Puoi passare una data sotto forma di stringa al costruttore di Date per creare un oggetto per la data specificata:

const date = new Date('Jul 12 2011');

Per ottenere l'anno corrente, utilizza il metodo getFullYear()  dell'oggetto Date istanziato. Il metodo getFullYear() restituisce l'anno della data specificata nel costruttore Date:

const currentYear = date.getFullYear();
console.log(currentYear); //2020

Allo stesso modo, ci sono metodi per ottenere il giorno corrente del mese e il mese corrente:

const today = date.getDate();
const currentMonth = date.getMonth() + 1; 

Il metodo getDate() restituisce il giorno corrente del mese (1-31).

Il metodo getMonth() restituisce il mese della data specificata. Una cosa da notare sul metodo getMonth() è che restituisce valori indicizzati a 0 (0-11) dove 0 indica gennaio e 11 indica invece dicembre. Da qui l'aggiunta di 1 per normalizzare il valore del mese.

Date now

now() è un metodo statico dell'oggetto Date. Restituisce il valore in millisecondi che rappresenta il tempo trascorso da Epoch. Puoi passare i millisecondi restituiti dal metodo now() al costruttore Date per creare un'istanza di un nuovo oggetto Date:

const timeElapsed = Date.now();
const today = new Date(timeElapsed);

Formattazione della data

È possibile formattare la data in più formati (GMT, ISO e così via) utilizzando i metodi dell'oggetto Date.

Il metodo toDateString() restituisce la data in un formato leggibile dall'uomo:

today.toDateString(); // "Sun Jun 14 2020"

Il metodo toISOString() restituisce la data che rispetta il formato esteso ISO 8601:

today.toISOString(); // "2020-06-13T18:30:00.000Z"

Il metodo toUTCString() restituisce la data nel formato del fuso orario UTC:

today.toUTCString(); // "Sat, 13 Jun 2020 18:30:00 GMT"

Il metodo toLocaleDateString() restituisce la data in un formato legato alla località:

today.toLocaleDateString(); // "6/14/2020"

È possibile trovare il riferimento completo per i metodi di Date nella documentazione MDN .

Funzione di formattazione personalizzata della data

A parte i formati menzionati nella sezione precedente, la tua applicazione potrebbe avere un formato diverso per i dati. Potrebbe essere in formato yy/dd/mm o yyyy-dd-mm o qualcosa di simile.

Per affrontare questo problema, sarebbe meglio creare una funzione riutilizzabile in modo che possa essere utilizzata in più progetti.

Quindi, in questa sezione, creiamo una funzione di utilità che restituirà la data nel formato specificato nell'argomento della funzione:

const today = new Date();

function formatDate(date, format) {
	//
}

formatDate(today, 'mm/dd/yy');

È necessario sostituire le stringhe "mm", "dd", "yy" con i rispettivi valori di mese, giorno e anno dalla stringa di formato passata nell'argomento.

Per farlo puoi usare il metodo replace() come mostrato di seguito:

format.replace('mm', date.getMonth() + 1);

Ma questo porterà a molti concatenamenti di metodi e renderà difficile la manutenzione mentre cerchi di rendere la funzione più flessibile:

format.replace('mm', date.getMonth() + 1)
    .replace('yy', date.getFullYear())
	.replace('dd', date.getDate());

Invece di concatenare metodi, puoi utilizzare l'espressione regolare con il metodo replace().

Per prima cosa crea un oggetto in cui la coppia chiave-valore rappresenterà la sottostringa e il suo valore corrispondente:

const formatMap = {
	mm: date.getMonth() + 1,
    dd: date.getDate(),
    yy: date.getFullYear().toString().slice(-2),
    yyyy: date.getFullYear()
};

Quindi, usa l'espressione regolare per abbinare e sostituire le stringhe:

formattedDate = format.replace(/mm|dd|yy|yyy/gi, matched => map[matched]);

La funzione completa si presenta così:

function formatDate(date, format) {
    const map = {
        mm: date.getMonth() + 1,
        dd: date.getDate(),
        yy: date.getFullYear().toString().slice(-2),
        yyyy: date.getFullYear()
    }

    return format.replace(/mm|dd|yy|yyy/gi, matched => map[matched])
}

Puoi anche aggiungere nella funzione la possibilità di formattare l'orario.

Conclusione

Spero che ora tu abbia una migliore comprensione dell'oggetto Date in JavaScript. Puoi anche utilizzare altre librerie di terze parti come datesj e moment per gestire le date nella tua applicazione.

Alla prossima volta, stai al sicuro e continua a impegnarti.