Date Javascript - gestire e manipolare date e orari

Javascript, grazie all’oggetto Date() offre una serie di potenti e preziosi strumenti per manipolare date e orari.In questa lezione della nostra guida a Javascript vedremo come manipolare le date attraverso l’oggeto nativo Date() ed anche attraverso alcune librerie appositamente pensate per semplificare la manipolazione di date e orari all’interno di applicativi basati su Javascript.

Indice

Premessa: recuperare e manipolare la data del client
Utilizzare l’oggetto Date()
I metodi dell’oggetto Date()
Utilizzare librerie ad hoc per la gestione delle date con Javascript
- XDate
- Moment.js

Premessa: recuperare e manipolare la data del client

Prima di addentrarci nell’analisi dei vari metodi supportati dall’oggetto Date() è bene ricordare che attraverso Javascript è possibile lavorare facendo riferimento alla data e orario settati sul browser dell’utente. Non è possibile, invece, utilizzare come riferimento temporale la data e l’ora settata sul nostro server web. Il perchè di questa caratteristica è di semplice comprensione: Javascript è un linguaggio lato-client è pertanto il suo ambito di esecuzione corrisponde al browser dell’utente e non al web server (salvo che venga utilizzato lato server come accade con Node.js).

Utilizzare l’oggetto Date()

Per utilizzare l’oggetto Date() è, prima di tutto, necessario creare una variabile a cui assegnare l’oggetto attraverso l’apposito costruttore:

var miadata = new Date();

Tutti i metodi dell’oggetto saranno ora associati alla variabile al cui interno abbiamo istanziato, appunto, l’oggetto Date().

I metodi dell’oggetto Date()

L’oggetto Date() è davvero molto ricco di metodi per la manipolazione di date e orari, in questa sede crercheremo di analizzare i principali, ovvero:

Metodi GET

I metodi della famiglia “get” sono quelli utilizzati per recuperare un dato valore relativo ad una data o ad un orario, i più usati sono:

getDate() – restituisce il numero del giorno corrente nel mese (1 -31);
getDay() – restituisce il numero del giorno corrente nella settimana (0 = domenica; 1 = lunedì; 2 = martedì; ecc.);
getMonth() – restituisce il numero del mese corrente (0 = gennaio; 1 = febbraio; 2 = marzo; ecc.);
getFullYear() – restituisce l’anno corrente;
getHours() – restituisce l’ora corrente (0 – 23);
getMinutes() – restituisce il minuto corrente (0 – 59);
getSeconds() – restituisce il secondo corrente (0 – 59);
getTime() – restituisce il valore corrente del timestamp;

Vediamo un esempio:

var miadata = new Date();
var gg = miadata.getDate();
var mm = miadata.getMonth();
var yyyy = miadata.getFullYear();
document.write(gg + '/' + (mm+1) + '/' + yyyy);

Metodi SET

I metodi della famiglia “set” sono quelli utilizzati per modificare (nel nostro script) uno o più valori relativi alla data o all’orario impostati nel browser, i più usati sono:

setDate() – imposta arbitrariamente il numero del giorno corrente nel mese;
setDay() – imposta arbitrariamente il numero del giorno corrente nella settimana;
setMonth() – imposta arbitrariamente il numero del mese corrente;
setFullYear() – imposta arbitrariamente l’anno corrente;
setHours() – imposta arbitrariamente l’ora corrente;
setMinutes() – imposta arbitrariamente il minuto corrente;
setSeconds() – imposta arbitrariamente il secondo corrente;

Vediamo un esempio di come settare, ai fini del nostro script, una data arbitraria:

var miadata = new Date();

// imposto arbitrariamente il giorno corrente al 25 del mese...
miadata.setDate(20);

// ...il mese a dicembre... Buon Natale 😉
miadata.setMonth(11);

/*
Ora svolgo una serie di operazioni sulle date
avendo come riferimento la data impostata arbitrariamente
/*

Metodi di conversione

Si tratta di una serie di metodi utilizzati per convertire un oggetto data in qualcos’altro. I più noti sono:

toISOString() – converte l’oggetto data in una stringa di testo utiizzando lo standard ISO per la definizione delle date;
toLocaleDateString() – converte l’oggetto data in una stringa di testo contenente la sola data (non verrà compreso l’orario) utilizzando le impostazioni locali del vostro browser (in poche parole vdrete una data scritta in italiano, se questa è la vostra lingua ovviamente);
toLocaleString() – converte l’oggetto data in una stringa di testo con data e orario utilizzando le impostazioni locali del vostro browser;
toString() – converte l’oggetto data in una stringa di testo;

Altri metodi dell’oggetto Date()

Oltre a quelli citati, l’oggetto date() dispone di altri metodi che non rientrano nelle categorie viste sopra; il più importante di questi è sicuramente parse() il quale converte una stringa contenente una data in un valore di timestamp.

Il metodo parse() non necessità che l’oggetto Date() venga istanziato in una variabile:

var ts = Date.parse('11 November, 2014');

Utilizzare librerie ad hoc per la gestione delle date con Javascript

La gestione delle date, come forse avrete intuito arrivati al termine di questa lezione, è probabilmente uno dei compiti più noiosi per chi deve realizzare uno script basato su JavaScript, non nego che tali procedure possano entusiasmare lo sviluppatore nei casi in cui si debbano creare applicazioni particolarmente complesse ma, sfide a parte, avendo a disposizione un libreria in grado di svolgere velocemente procedure di parsing, manipolazione e formattazione delle date, digitare il nostro codice diventerà sicuramente più semplice e veloce.

XDate

Tra le numerose soluzioni disponibili in Rete a questo scopo voglio segnalare XDate, una library JS standalone (ebbene si, niente jQuery questa volta!) che ha innanzitutto la vantaggiosa caratteristica di pesare appena 3 Kb se sotto forma di archivio compresso (con algoritmo GZip); tra le funzionalità messe a disposizione da XDate ve ne sono alcune che potranno essere sfruttate frequentemente, come per esempio:

il calcolo delle differenze tra date;
la possibilità di visualizzare gli output prodotti in diversi formati;
la manipolazione dei valori UTC (tempo coordinato universale);
la possibilità di includere la libreria in applicazioni di terze parti.

XDate è un progetto gratuito ed è utilizzabile liberamente. La libreria è scaricabile da Github oppure dal sito ufficiale del progetto dove è disponibile anche una buona documentazione circa il suo utilizzo.

Moment.js

Se avete necessità di una soluzione semplice ed efficente per la gestione delle date, vi suggerisco di mettere alla prova Moments.js; si tratta di una libreria basata sul linguaggio JavaScript che mette a disposizione numerose funzionalità utili per la lettura, la manipolazione e la formattazione di date e orari. Per scaricarla, “pesa” soltanto 18 Kb in versione Full Source, sarà possibile recarsi sul sito ufficiale del progetto o clonarne il repository tramite Git:

Moment.js potrà essere utilizzato tramite browser cosi come all’interno di un ambiente server event-driven basato su Node.JS; sono disponibili numerosi metodi per la restituzione delle date in differenti formati e per effettuare calcoli come per esempio gli intervalli di tempo, ad esempio:

var halloween = moment([2019, 10, 31]);
console.log(halloween.fromNow());

Permetterà di calcolare il numero di giorni passati dal 31 ottobre 2019 ad oggi; è inoltre supportata la gestione dei Timestamp:

var day = moment(1318781876406);

Moment.js supporta il multilinguaggio, eventuali lingue mancanti potranno essere aggiunte editando un apposito file JavaScript.

Date Javascript – gestire e manipolare date e orari