Home / Programmazione / Javascript - AJAX / jQuery UI Datepicker
Mattepuffo

jQuery UI Datepicker

jQuery UI Datepicker

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="../template/css/jquery-ui-1.8.14.custom.css" type="text/css" />
<script type="text/javascript" src="lib/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="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="../template/css/jquery-ui-1.8.14.custom.css" type="text/css" />
<script type="text/javascript" src="lib/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="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!