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 (106.422)

:: Breve guida a jQuery (96.579)

:: Le espressioni regolari in Javascript (84.653)

:: Gestione delle stringhe in Javascript (73.981)

:: Stampare una pagina col Dhtml (42.629)

:: Menu orizzontale dinamico in Dhtml (36.921)

:: Gli Array in Javascript (35.634)

:: Temporizzazioni Javascript (31.148)

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

:: DOM: rendere cross-browser il comando innerHTML (27.952)

IN EVIDENZA
DOWNLOAD