Datapicker: calendario in javascript per moduli

Chi è abituato a sviluppare applicazioni web si sarà sicuramente trovato nella necessità di sviluppare una form nella quale viene richiesto inserimento di dati da parte dell' utente e talvolta questi dati corrispondono ad una data (di nascita, di cambio di residenza, ecc). Ciò che è più complesso di tali form, è controllare e validare i dati inseriti nel campo data. Per assicurarsi una buona validazione si può ricorrere ad un calendario da mostrare all' utente nel momento in cui deve impostare una data. In questo tutorial vedremo come farlo utilizzando JavaScript e codice CSS (Download sorgente di quanto spiegato in seguito).

Innanzitutto creiamo la form di partenza, composta da qualche campo di testo completabile dall' utente. Eccone il codice:

    <!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"><img
src="calendar.gif" alt="Datepicker">
</form>
</div>
</body>
</html>

 

Salviamo questo documento come datepicker.html e lasciamolo 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 codice evidenziato:

    <!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><input
class="textbox" type="text"><img src="calendar.gif"
alt="Datepicker">
</form>
</div>
</body>
</html>

 

La parte grafica è sistemata. Dobbiamo ora far aprire l' apertura di un popup che permetta ai visitatori di scegliere una data. Creeremo quindi un div nascosto, che diverrà visibile solamente nel momento in cui il visitatore 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 div contenente due box differenti, l' uno relativo ai mesi e l' altro agli anni. Naturalmente il range del box relativo agli anni è espandibile, nell' esempio si va 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><a
href="" class="datelive">12</a>
  <a href="" class="datelive">13</a><a href=""
class="datelive">14</a><a href="" class="datelive">15</a><a
href="" 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><a
href="" 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><a
href="" class="dateunlive"></a><a href="" class="dateunlive"></a>

</div>

 

 

Come si può notare, i giorni vengono rappresentati in numeri, 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, il codice 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 sopra riportato; Internet Explorer invece tralascerà alcune delle opzioni in esso specificate.

Per quanto riguarda invece lo stile dei quadratini contenenti il 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 di 1px e viene ripetuto in ciascuno di essi. Alcuni quadratini risulteranno grigi, e questo grazie ad un importante accorgimento: non tutti i mesi hanno lo stesso numero di giorni e quindi ad esempio Settembre, avrà il quadratino del 31 grigio.

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

fig1



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Luca
Ti è piaciuto l'articolo?