Home Javascript - AJAX jQuery UI Datepicker
jQuery UI Datepicker
Programmazione & Co.
Lunedì 04 Luglio 2011 13:32

jQuery UI è la libreria jQuery per la gestione della User Interface (UI).

Ha molti componenti interessanti, e di uno ho già parlato.

Oggi invece affrontiamo il Datepicker, che ci aiuta a inserire la data.

Questo può essere molto utile per il formato giusto, che deve essere allineato a quello del db dove salviamo la data.

Nel mio caso uso un db MySQL con un campo Date che ha questa forma: yyyy-mm-dd.

Prima di tutto dobbiamo scaricare jQuery e jQuery UI.

Sul secondo possiamo anche sceglliere il colore della grafica e verrà scaricato anche un CSS.

Poi dobbiamo richiamare le librerie e il CSS:

<link rel="stylesheet" href="/site/../template/css/jquery-ui-1.8.14.custom.css" type="text/css" />
<script type="text/javascript" src="/site/lib/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/site/lib/jquery-ui-1.8.14.custom.min.js"></script>

Una volta fatto questo la pagina dovrà sarà simile a questa:

 

<html>
<head>
<link rel="stylesheet" href="/site/../template/css/jquery-ui-1.8.14.custom.css" type="text/css" />
 <script type="text/javascript" src="/site/lib/jquery-1.6.2.min.js"></script>
 <script type="text/javascript" src="/site/lib/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" >
 $(function() {
 $("#datepicker").datepicker({});
 });
 </script>
</head>
<body>
<input type="text" id="datepicker" value="" />
</body>
</html>

Questo è il minimo indispensabile, ma non di certo il tutto.

Nella pagina ufficiale potete vedere tutto ciò che vi serve.

Le personalizzazioni sono praticamente infinite.

Vi mostro quello che uso io:

<script type="text/javascript" >
 $(function() {
 $("#datepicker").datepicker({
 changeMonth: true,
 changeYear: true,
 dateFormat: "yy-mm-dd",
 yearRange: "1950:2012"
 });
 });
 </script>

changeMonth e changeYear permettono di cambiare mese e anno selezionandoli da una dropdownlist.

Con dateFormat scelgo il formato della data.

Io ho impostato lo stesso usato da MySQL per non rischiare; tanto in fase di visualizzazione la data possiamo metterla come vogliamo.

Infine ho impostato il range degli anni tra cui poter scegliere; nell'opzione dovete impostare l'anno minimo e quello massimo.

Direi che la cosa è abbastanza semplice e soprattutto molto comoda; se ben configurato si evitano un sacco di errori in fase di inserimento nel database!
Ultimo aggiornamento Domenica 23 Ottobre 2011 10:39