Creare un calendario con jQuery

Spesso i programmatori hanno il problema di rendere nel modo migliore l’interfaccia utente delle applicazioni da sviluppare, nella maniera più semplice e senza possibilità di sbagliare.

Per questo motivo nelle applicazioni web si trovano i cosidetti “framework” javascript, delle librerie che forniscono metodi di utilità e che risolvono le differenze e le incompatibilità tra i vari browser disponibili.

jQuery

jQuery framework

Qui a Glocalmedia, dopo aver provato alcuni tra i più conosciuti framework,  abbiamo scelto di utilizzare jQuery. Le ragioni che ci hanno spinto a preferire questo framework sono molteplici: in primo luogo non rallenta l’esecuzione delle pagine, “c’è ma non si vede”. Inoltre, il progetto è frequentemente aggiornato, infatti  vengono costantemente aggiunte funzioni e migliorate quelle già presenti. E’ facile da utilizzare, ha una documentazione impeccabile ed è corredato da grande quantità di tools  (plugins) già pronti per essere impiegati e che forniscono ulteriori funzioni particolarmente interessanti.

Uno di questi plugin è jQuery UI ovvero una “User Interface” (interfaccia per l’utente) che estende le funzionalità del framework base. jQuery UI mette a disposizione dello sviluppatore alcuni oggetti tipici della programmazione non orientata al web, come barre di caricamento, pulsanti, slider ecc ecc…

Lo strumento più interessante però è il cosiddetto “Datepicker”. E’ molto funzionale, è applicabile in diverse situazioni e consiste nella  possibilità di aggiungere ad un comune campo testuale un selettore di date. Si realizza così un semplice calendario che fornisce all’utente finale la possibilità di scegliere una data ed inserirla già formattata secondo le necessità dello sviluppatore.

Aggiungere questa funzione nelle proprie pagine web è davvero semplice. Il primo passo da compiere è quello di includere i files javascript e il css nel tag head della pagina:

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

Fatto ciò si assegna un id al campo di testo che si vuol trasformare in un calendario:

<input type=”text” id=”mydatepicker” … />

A questo punto non resta che richiamare con javascript la funzione datepicker su questo campo:

$(document).ready(function(){
$('#mydatepicker').datepicker();
});

Cliccando all’interno del campo verrà ora presentato il selettore di date.

Per personalizzare ulteriormente questo oggetto, datepicker presenta numerose opzioni, ma la più comune è sicuramente quella per formattare la data. Per fare ciò al momento del richiamo della funzione dobbiamo passare un parametro che specifichi il formato desiderato, e sostituire quindi il precendente codice con questo:

$('#mydatepicker').datepicker({dateFormat: 'dd/mm/yy'});

In questo modo la data sarà sotto forma di “gg/mm/aaaa”.

Lascia un commento