Questo script è basato sulla possibilitù di generare un
oggetto data sulla base di valori predefiniti. In pratica un'istruzione del tipo:
var nuovadata = new Date(aaaa,mm,gg) genera una data corrispondente al giorno, mese ed anno inseriti, che potremo poi manipolare come al solito (v. tutorial sull'
oggeto Date()).
Il bello sta nel fatto che se passiamo dei valori che corrispondono ad una data inesistente (ad esempio 30 febbraio 2000) la data che verrà creata sarà 01/03/2002, quindi una data "vera": confrontando la data inserita dall'utente con quella generata possiamo dunque stabilire se la data inserita dall'utente è giusta e così avvertirlo ed eventualmente correggere il dato in automatico, cosa che lo script in effetti fa.
Questa è la pagina di test con lo script:
<HTML>
<HEAD>
<TITLE>http://www.jsdir.com - Data Valida</TITLE>
<SCRIPT>
<!--
function controlla()
{
obj=document.modulo.data.value.replace(/[^\d]/g,"0");;
gg=obj.substr(0,2)
mm=obj.substr(3,2);
aa=obj.substr(6,4);
strdata=gg+"/"+mm+"/"+aa;
data = new Date(aa,mm-1,gg);
daa=data.getFullYear().toString();
dmm=(data.getMonth()+1).toString();
dmm=dmm.length==1?"0"+dmm:dmm
dgg=data.getDate().toString();
dgg=dgg.length==1?"0"+dgg:dgg
dddata=dgg+"/"+dmm+"/"+daa
if (dddata!=strdata)
{
alert("Verificare la data inserita");
document.modulo.data.value=dddata; // Nel campo viene scritta la data generata
// document.modulo.data.value=""; // Il campo viene cancellato e...
// document.modulo.data.focus(); //...viene ridato il focus per il reinserimento
}
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#ffffff">
<FORM NAME="modulo">
Inserisci la data (gg/mm/aaaa)
<INPUT TYPE="text" NAME="data" VALUE="" CLASS="" onChange="controlla()" onKeyUp="if (this.value.length==10){this.blur()}">
</FORM>
</BODY>
</HTML>
Iniziando dalla parte HTML della pagina, vediamo che nel form è previsto un campo TEXT in cui l'utente ci fornirà l'input. Al campo sono associati due event-handler:
onChange ed
onKeyUp
onKeyUp ci serve da contatore: controlla che siano stati inseriti al massimo 10 caratteri (due per il giorno, due per il mese, quattro per l'anno più i due "/") e poi disabilita il campo con
this.blur(). Questo fa scattare
onChange che avviando la funzione
controlla() verifica la data inserita.
Lo script inizia assegnando alla variabile
obj il valore del campo testo filtrato da tutti i caratteri non numerici (che vengono sostituiti da uno zero) per porci al riparo dall'errore
NaN.
Vale la pena sottolineare che anche i due / inseriti vengono convertiti in zero (cioè
21/03/2002 diventa di fatto
2100302002 ma la cosa non ci da problemi perché i due caratteri / non intervengono nel controllo).
obj diventa così una stringa che contiene solo cifre.
Nelle tre righe successive vengono assegnati alle variabili
gg, mm, aaaa i caratteri corrispondenti al giorno, mese ed anno secondo il formato che abbiamo stabilito (gg/mm/aaaa): è evidente che se desideriamo un altro formato sarà sufficiente cambiare gli indici dei
substr() in queste tre righe.
Fatto questo la riga successiva crea la nuova data dalla quale, nelle cinque righe che seguono, estraiamo i valori di giorno, mese ed anno con i soliti metodi dell'oggetto (fare sempre riferimento al tutorial citato). Per il giorno ed il mese controlliamo anche che il numero non sia minore di 10 ed in tal caso anteponiamo uno zero.
Una volta estratti questi valori generiamo una nuova stringa (data) con i valori che lo script ha ricavato fino adesso, nello stesso formato con cui sono stati richiesti all'utente:
dddata=dgg+"/"+dmm+"/"+daa.
E con questo abbiamo finito: non ci resta che vedere se la stringa appena generata (dddata) è uguale a quella inserita dall'utente (strdata). Se le variabili coincidono lo script non fa più niente ed il contollo si ferma qui.
Se i valori sono diversi si possono intraprendere le azioni volute. Nell'esempio al valore inserito dall'utente io ho sostituito la data generata dallo script (comodo in alcuni casi, perché 31/02/2002, per esempio, diventa 01/05/2002) e poi l'ho avvertito con un alert.
Altrimenti (righe colorate in grigio in questa pagina e commentate nello script) si può semplicemente cancellare il campo e poi ridargli il focus perché venga reinserita la data .