JavaScript: confrontare due date

Pubblicato il 17 Dicembre 2008

Mettiamo di dover realizzare un form per prenotare un viaggio e, quindi, dobbiamo sicuramente lavorare sulla validazione dei dati inseriti nel form.

Un controllo da dover sicuramente fare è quello sulla data di partenza e, in questo caso, verificare che non sia successiva a quella di arrivo.

Vediamo come realizzare questo controllo con il buon vecchio JavaScript 😉

Form

<form method=”get” action=”#” name=”form”>
Data di partenza<br />
<input type=”text” name=”data1″  /><br /><br />
Data di arrivo<br />
<input type=”text” name=”data2″  /><br /><br />
<input type=”button” value=”Check date” onclick=”javascript:check_date()” />
</form>

Funzione JS

function check_date() {

var data_iniziale = document.form.data1.value;
var data_finale = document.form.data2.value;

var arr1 = data_iniziale.split(“/”);
var arr2 = data_finale.split(“/”);

var d1 = new Date(arr1[2],arr1[1]-1,arr1[0]);
var d2 = new Date(arr2[2],arr2[1]-1,arr2[0]);

var r1 = d1.getTime();
var r2 = d2.getTime();

if (r1<=r2) alert(“Il controllo ha avuto buon esito.”);
else alert(“La data di partenza è successiva a quella di arrivo!”);

}

Analizziamo la funzione JS:

var data_iniziale = document.form.data1.value;
var data_finale = document.form.data2.value;

Recuperiamo la data di partenza e quella di arrivo nel formato gg/mm/aaaa

var arr1 = data_iniziale.split(“/”);
var arr2 = data_finale.split(“/”);

“splittiamo” (non l’ho inventato io fortunatamente  🙂 ) le variabili per ottenere in due array giorno, mese e anno delle due date.

var d1 = new Date(arr1[2],arr1[1]-1,arr1[0]);
var d2 = new Date(arr2[2],arr2[1]-1,arr2[0]);

Creiamo i due oggetti “Date” delle due date.

var r1 = d1.getTime();
var r2 = d2.getTime();

Ricaviamo con getTime i timestamp che potremo facilmente confrontare.

if (r1<=r2) alert(“Il controllo ha avuto buon esito.”);
else alert(“La data di partenza è successiva a quella di arrivo!”);

A questo link potete provare lo script.

Condividi il post con i tuoi amici o colleghi
emawebdesign
Autore: emawebdesign

Full Stack Developer, SEO Specialist, esperto della trasformazione digitale con oltre 20 anni di esperienza.

Pubblicato in: