Datapicker: calendario in javascript per moduli

Chi è abituato a sviluppare applicazioni web sisarà sicuramente trovato nella necessità disviluppare una form nella quale viene richiesto inserimentodi dati da parte dell' utente e talvolta questi daticorrispondono ad una data (di nascita, di cambio diresidenza, ecc). Ciò che è piùcomplesso di tali form, è controllare e validare idati inseriti nel campo data. Per assicurarsi unabuona validazione si può ricorrere ad un calendario damostrare all' utente nel momento in cui deve impostareuna data. In questo tutorial vedremo come farlo utilizzandoJavaScript e codice CSS (Downloadsorgente di quanto spiegato in seguito).

Innanzitutto creiamo la form di partenza, composta da qualchecampo di testo completabile dall' utente. Eccone ilcodice:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"http://www.w3.org/TR/html4/strict.dtd><html lang="en"><head><title>Date Picker Example</title><head><body><h1>A Generic Form</h1><div><form action=""><span> Enter A Date:</span><input type="text"><imgsrc="calendar.gif" alt="Datepicker"></form></div></body></html>

 

Salviamo questo documento come datepicker.html elasciamolo un secondo da parte. Abbiamo da pensare al CSS,per rendere la form e la pagina in generale un po'più accattivante. Ecco un piccolo esempio:

 

    h1 {font-family:arial, sans-serif;color:#003399;border-bottom-width:3px;border-bottom-color:#ffcc00;border-bottom-style:solid;}img {position:relative;top:10px;padding-left:10px;}.text {font-family:arial, sans-serif;color:#003399;padding-right:10px;}.textbox {border-width:1px;border-color:#ffcc00;border-style:solid;}

 

 

Salviamolo come datepicker.css,torniamo alla nostra pagina HTML ed aggiungiamovi il codiceevidenziato:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"http://www.w3.org/TR/html4/strict.dtd><html lang="en"><head><title>Date Picker Example</title><link rel="stylesheet" type="text/css"herf="datepicker.css"><head><body><h1>A Generic Form</h1><div><form action=""><span class="text">Enter A Date:</span><inputclass="textbox" type="text"><img src="calendar.gif"alt="Datepicker"></form></div></body></html>

 

La parte grafica è sistemata. Dobbiamo ora far aprirel' apertura di un popup che permetta ai visitatori discegliere una data. Creeremo quindi un div nascosto, chediverrà visibile solamente nel momento in cui ilvisitatore clickerà sull' icona del calendario.Nella pagina HTML aggiungiamo il seguente codice:

 

    <div class="picker">  <select class="month"><option>Mese</option><option>Gennaio</option><option>Febbraio</option><option>Marzo</option><option>Aprile</option><option>Maggio</option><option>Giugno</option><option>Luglio</option><option>Agosto</option><option>Settembre</option><option>Ottobre</option><option>Novembre</option><option>Dicembre</option></select>  <select class="year"><option>Anno</option><option>2000</option><option>2001</option><option>2002</option><option>2003</option><option>2004</option><option>2005</option><option>2006</option><option>2007</option><option>2008</option><option>2009</option></select>

 

 

Nel codice sopra-riportato non si fa altro che creare un divcontenente due box differenti, l' uno relativo ai mesi el' altro agli anni. Naturalmente il range del boxrelativo agli anni è espandibile, nell' esempio siva solamente dal 2000 al 2009 per comodità.

Occupiamoci ora del codice relativo ai giorni:

 

    <a href="" class="datelive">1</a><a href=""class="datelive">2</a><a href="" class="datelive">3</a><a href=""class="datelive">4</a><a href="" class="datelive">5</a><a href=""class="datelive">6</a>  <a href="" class="datelive">7</a><a href=""class="datelive">8</a><a href="" class="datelive">9</a><a href=""class="datelive">10</a><a href="" class="datelive">11</a><ahref="" class="datelive">12</a>  <a href="" class="datelive">13</a><a href=""class="datelive">14</a><a href="" class="datelive">15</a><ahref="" class="datelive">16</a><a href="" class="datelive">17</a><a href="" class="datelive">18</a>  <a href="" class="datelive">19</a><a href=""class="datelive">20</a><a href="" class="datelive">21</a><ahref="" class="datelive">22</a><a href="" class="datelive">23</a><a href="" class="datelive">24</a><a href="" class="datelive">25</a><a href=""class="datelive">26</a><a href="" class="datelive">27</a><a href="" class="datelive">28</a><a href=""class="datelive">29</a><a href="" class="datelive">30</a><a href="" class="datelive">31</a><a href=""class="dateunlive"></a><a href="" class="dateunlive"></a><ahref="" class="dateunlive"></a><a href="" class="dateunlive"></a></div>

 

 

Come si può notare, i giorni vengono rappresentati innumeri, che vanno da 1 a 31. Ciascun numero ècontenuto in un piccolo riquadro. Certo, la grafica nonè un gran che'...ma ora andremo a migliorarla.Aggiungiamo, subito sotto all' icona del calendario, ilcodice CSS

    .picker {  position:relative;  left:305px;  top:-21px;  float:left;  width:172px;  border-width:1px;  border-color:#ffcc00;  border-style:solid;  padding-left:4px;  padding-top:4px;  padding-bottom:4px;  display:none;}

 

Questo non sarà visibile fino al click sull'icona.

Per quanto riguarda i due box relativi al mese ed all'anno, ecco il codice CSS:

 

    .month {float:left;border-width:1px;border-color:#ffcc00;border-style:solid;margin:1px;width:94px;padding-left:2px;color:#ffcc00;}.year {float:left;border-width:1px;border-color:#ffcc00;border-style:solid;margin:1px;width:70px;padding-left:2px;color:#ffcc00;}

 

 

NB: Firefox interpreta correttamente il codice soprariportato; Internet Explorer invece tralascerà alcunedelle opzioni in esso specificate.

Per quanto riguarda invece lo stile dei quadratini contenentiil numero del giorno, ecco il codice:

 

    .datelive {  float:left;  background-image:url('datelive.gif');  background-repeat:repeat-x;  width:20px;  height:20px;  border-style:solid;  border-color:#ffcc00;  border-width:1px;  text-align:center;  color:#ffcc00;  margin:1px;  text-decoration:none;}.datelive:hover {  background-image:url('datelive_over.gif');  background-repeat:repeat-x;  color:#ffffcc}.dateunlive {  float:left;  background-image:url('dateunlive.gif');  background-repeat:repeat-x;  width:20px;  height:20px;  border-style:solid;  border-color:#666666;  border-width:1px;  margin:1px;}

 

 

Lo sfondo di ciascun quadratino è delle dimensioni di1px e viene ripetuto in ciascuno di essi. Alcuni quadratinirisulteranno grigi, e questo grazie ad un importanteaccorgimento: non tutti i mesi hanno lo stesso numero digiorni e quindi ad esempio Settembre, avrà ilquadratino del 31 grigio.

Terminato il tutto, ecco il nostro date picker (calendario)

fig1



Ti potrebbe interessare anche

commenta la notizia