Volando come un Rasteriz

jQuery non è soltanto una libreria snella e funzionale ma, con la sua estensione destinata alle interfacce utente, permette di esprimere al massimo il suo valore aggiunto.

jQuery UI (sostanzialmente: User Interface) offre un valido supporto per l’astrazione di interazioni ed animazioni a basso livello. Inoltre, fornisce diversi effetti, widget con grafica personalizzata e molto altro ancora.

Oggi tratteremo proprio il widget Datapicker: un componente che, una volta inizializzato implementerà, all’interno di una casella testo, un vero e proprio calendario che sicuramente migliorerà e semplificherà l’esperienza degli utenti all’interno dei nostri progetti.

L’immagine proposta all’inizio del post rende completamente l’idea di quanto abbiamo intenzione di realizzare: una semplice casella di testo (input di tipo text, di un form) ed un po’ di Javascript… questi gli ingredienti.

La comodità offerta dal datapicker non si limita, però, al solo gradimento grafico. Andiamo ben oltre grazie al supporto di comandi brevi da tastiera che ci permetteranno di navigare all’interno di esso con facilità:

• pag su/giù – mese precedente/successivo
• ctrl+pag su/giù – anno precedente/successivo
• ctrl+home – mese corrente oppure apri quando viene chiuso
• ctrl+sinistra/destra – giorno precedente/successivo
• ctrl+sopra/sotto – settimana precedente/successiva
• invio/enter – accetta la data selezionata
• ctrl+fine – chiudi e cancella la data scelta
• esc – chiudi senza selezionare nulla

Per utilizzare jQuery UI, ovviamente dovremo includere (oltre al classico file jQuery base) anche la libreria jQuery  (che possiamo scaricare dal sito ufficiale oppure includere tramite le Google API Ajax Libraries).

Scriviamo qualche riga di codice HTML per creare una casella di testo:

<div class="esempio_datapicker">
    Scegli la data: <input type="text" name="datapicker" id="datapicker" />
</div>

Ed ora veniamo al cuore del sistema:

<script type="text/javascript">
$(document).ready(function() {
	$("#datepicker").datepicker($.datepicker.regional['it']);
});
</script>

Bene. Abbiamo finito… se non ho commesso errori a scrivere, dovrebbe funzionare tutto. Per maggiori informazioni, comunque, potete seguire la guida ufficiale.

<script type="text/javascript">
	$(function() {
		$.datepicker.setDefaults($.extend({showMonthAfterYear: false}, $.datepicker.regional['']));
		$("#datepicker").datepicker($.datepicker.regional['fr']);
		$("#locale").change(function() {
			$('#datepicker').datepicker('option', $.extend({showMonthAfterYear: false},
				$.datepicker.regional[$(this).val()]));
		});
	});
	</script>

Condividi questo testo

Articoli suggeriti:

1. Intercettare evento scroll con jQuery
2. Eliminare da una tabella le righe, con effetto a scomparsa e jQuery
3. Scopriamo quanto è facile effettuare una richiesta AJAX con jQuery
4. Scorrere le immagini con un effetto a scomparsa utilizzando jQuery
5. jQuery (ed altre librerie) sempre aggiornate e caricate più velocemente grazie a Google