JQuery utilizzo base DatePicker

Mi sono trovato ad utilizzare il controllo calendario di Jquery e l’ho trovato veramente comodissimo e di facile utilizzo.
Dal sito di Jquery occorre scaricare :

1.  Ultima versione fwk Jquery;
2.  Ultima versione fwk Jquery-ui (quello che comprende i widget più diffusi);
3. File javascript di localizzazione per il calendario (da http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/ ).

Il file del punto 3 va scaricato a parte mentre i primi due, unitamente al css, si trovano nello zip scaricato dal sito (nel mio caso jquery-ui-1.8.20.custom.zip ).

Ho quindi creato una Web App per testare il calendario, nella jsp ho inserito i link ai js:


<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.datepicker-it.js">
</script>

Quindi nel codice javascript della jsp ho inserito la funzione che costruisce il calendario :

<script type="text/javascript">
   $(function(){
    $(".data:input").datepicker({showAnim: 'slide',
      changeMonth: true ,
      changeYear: true,
      maxDate:new Date(),
      showButtonPanel: true,
      showOn: "button",
   buttonImage: "images/calendar.gif",
   buttonImageOnly: true
      }
        
      );
   });
</script>

Il selettore $(“.data:input”) specifica che questo codice js sarà applicato a tutti gli elementi di tipo <input type=”text” /> aventi attributo di tipo class denominato “data”.

All’interno della funzione datePicker ci si può veramente sbizzarrire in quanto esistono innumerevoli proprietà da poter inserire, tra cui animazioni, pulsanti particolari ecc.
Nel mio caso è stato interessante utilizzare gli attributi:
• changeMonth e changeYear che settati a true consentono di poter selezionare velocemente da combo anni e mesi;
• maxDate che consente di limitare la data inserita (in questo caso consente al massimo di inserire la data odierna);
• showButtonPanel , che settato a true consente di visualizzare sotto il calendario i pulsanti “Oggi” e “chiudi”;
• showOn buttonImage e buttonImageOnly che con il settaggio su proposto consentono di visualizzare a fianco della text box un bottone al cui click si attiva il calendario.
Esistono poi una miriade di funzionalità aggiuntive, basta consultare le guide on line disponibili.