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 piA? semplice e senza possibilitAi?? di sbagliare.

Per questo motivo nelle applicazioni web si trovano i cosidetti ai???frameworkai??? javascript, delle librerie che forniscono metodi di utilitAi?? e che risolvono le differenze e le incompatibilitAi?? tra i vari browser disponibili.

jQuery

jQuery framework

Qui a Glocalmedia, dopo aver provato alcuni tra i piA? conosciuti framework,Ai?? 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, ai???c’A? ma non si vedeai???. Inoltre, il progetto A? frequentemente aggiornato, infattiAi?? vengono costantemente aggiunte funzioni e migliorate quelle giAi?? presenti. E’ facile da utilizzare, ha una documentazione impeccabile ed A? corredato da grande quantitAi?? di toolsAi?? (plugins) giAi?? pronti per essere impiegati e che forniscono ulteriori funzioni particolarmente interessanti.

Uno di questi plugin A? jQuery UI ovvero una ai???User Interfaceai??? (interfaccia per l’utente) che estende le funzionalitAi?? 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 piA? interessante perA? A? il cosiddetto ai???Datepickerai???. E’ molto funzionale, A? applicabile in diverse situazioni e consiste nellaAi?? possibilitAi?? di aggiungere ad un comune campo testuale un selettore di date. Si realizza cosAi?? un semplice calendario che fornisce all’utente finale la possibilitAi?? di scegliere una data ed inserirla giAi?? formattata secondo le necessitAi?? dello sviluppatore.

Aggiungere questa funzione nelle proprie pagine web A? davvero semplice. Il primo passo da compiere A? 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 ciA? si assegna un id al campo di testo che si vuol trasformare in un calendario:

<input type=ai???textai??? id=ai???mydatepickerai??? ai??i?? />

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 verrAi?? ora presentato il selettore di date.

Per personalizzare ulteriormente questo oggetto, datepicker presenta numerose opzioni, ma la piA? comune A? sicuramente quella per formattare la data. Per fare ciA? 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 sarAi?? sotto forma di ai???gg/mm/aaaaai???.

Lascia un commento