Inserire in automatico lo slash nel formato data gg/mm/aaaa

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

Molti programmi ad interfaccia DOS ci hanno abituato ad inserire la data anche senza includere il carattere / come separazione tra giorno e mese, e mese ed anno. Si tratta di null'altro di una banale ma intelligente operazione di lavoro con le stringhe.

Tenterò di essere un attimo più chiaro in merito all'esempio che andremo a svolgere: io sono nato il 12 Aprile del 1978, quindi la mia data di nascita in formato gg/mm/aaaa è 12/04/1978. Il controllo che imposteremo su un generico campo (dedicato alla) data di un modulo mi consentirà di inserire la mia data di nascita come 12041978 e provvederà in automatico alla separazione con i caratteri /.

Creiamo un modulo:

<form name="modulo">
    <input type="text" name="data">
    <input type="button" value="OK" onClick="DataTest()">
</form>
Nulla di più di un modulo con una Textarea ed un pulsante a cui abbiamo associato la funzione DataTest(); per l'integrazione in una reale applicazione consiglio di utilizzare l'evento onChange direttamente sulla casella di testo.

Vediamo il codice Javascript del controllo, in attesa di commentare le fasi salienti:
function DataTest()
{
    var data = document.modulo.data.value;
    var lunghezza = data.length;
        if (isNaN(data))
        {
            alert("Inserire solo caratteri numerici");
            document.modulo.data.value = "";
            document.modulo.data.focus();
        }
        else if (lunghezza == 8)
        {
            var dividi_gg = data.substring(0,2);
            var dividi_mm = data.substring(2,4);
            var dividi_aaaa = data.substring(4,8);
            document.modulo.data.value = dividi_gg + "/" + dividi_mm + "/" + dividi_aaaa;
        }
        else
        {
            alert("Inserire 8 caratteri numerici");
            document.modulo.data.value = "";
            document.modulo.data.focus();
        }
}
Apriamo lo script controllando che i caratteri inseriti nella casella di testo siano esclusivamente di tipo numerico. in un secondo momento controlliamo che la stringa sia composta di almeno 8 caratteri: 2 per il giorno, 2 per il mese e 4 per l'anno. Il terzo passo è quello decisivo: utilizzando il metodo substring() dell'oggetto String siamo in grado di dividere i nostri otto caratteri in 3 parti, formate dai suddetti 2 caratteri per il giorno, 2 per il mese e 4 per l'anno.

Ricordo che il conteggio inizia da 0 e non da 1.

I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (109.226)

:: Breve guida a jQuery (100.972)

:: Le espressioni regolari in Javascript (85.381)

:: Gestione delle stringhe in Javascript (75.869)

:: Stampare una pagina col Dhtml (43.130)

:: Menu orizzontale dinamico in Dhtml (37.470)

:: Gli Array in Javascript (36.260)

:: Temporizzazioni Javascript (32.034)

:: Istruzion condizionali in Javascript: if e switch (29.291)

:: Utilizzo della proprietà form di Javascript per il recupero dei dati da un modulo (28.987)

IN EVIDENZA
DOWNLOAD