Come usare il datepicker di jQueryUI

La libreria jQueryUI permette di realizzare notevoli effetti grafici, utili soprattutto nella definizione delle interfaccia utente, con pochissime righe di codice. I risultati sono davvero interessanti, ma non sempre otteniamo cio che viene promesso dalle demo disponibili sul sito di jQueryUI. Un esempio di possibili problemi riscontrabili nel passare dalla teoria alla pratica e discusso qui in riferimento all'implementazione dei menu accordion.

Personalizzazione

Personalizzazione

Dopo aver definito in modo opportuno la dimensione del widget , ci accorgeremo probabilmente di altri piccoli problemi. Per default la data inserita nel campo input è nel formato anglosassone: il mese viene scritto come prima cifra, seguito poi dal numero del giorno. Se vogliamo usare il formato italiano, che antepone il giorno del mese al numero del mese, dobbiamo personalizzare le opzioni del widget, usando un’istruzione come questa

Se invece vogliamo cambiare l’animazione che si occupa di far comparire e scomparire il widget, possiamo scegliere tra una vasta gamma di scelte, elencate qui. A titolo di esempio, per modificare l’animazione di default con una personalizzata, basta una riga come questa

quando dobbiamo impostare più di un parametro, ovviamente conviene usare la sintassi basata sulla notazione degli Object Literal, ovvero:

L’ultima personalizzazione che potrebbe interessarci riguarda il tema di jQueryUI. Quando usiamo jQueryUI, oltre ad importarla nell’header della pagina, dobbiamo anche importare il foglio di stile che definisce il tema dei vari widget. Questo è obbligatorio anche se usiamo il tema di default . Le intestazioni minime per lavorare con jQueryUI sono sempre qualcosa del genere

Dove ovviamente il numero di versione dipende da quella che vogliamo usare. Nel caso qui sopra abbiamo scelto il tema base, identificato dalla keyword base. Sul sito di jQueryUI possiamo scegliere tra diversi temi: un modo molto comodo di scegliere il tema che più ci piace è quello di usare il ThemeRoller, disponibile qui. La pagina permette di visualizzare e confrontare velocemente i vari temi disponibili, ma non solo: lavorando su un’interfaccia del ThemeRoller possiamo personalizzare ogni singolo aspetto del tema, che va da “quanto tondi” devono essere bordi fino al colore di ogni singolo componente. Dopo aver personalizzato un tema possiamo scaricarlo in locale, creando così il nostro tema personale.

Se invece vogliamo usare un tema di quelli già esistenti sul repository CDN possiamo consultare la lista aggiornata su un blog di jQueryUI, disponibile qui. Questa pagina riassume tutti i principali repository CDN per le librerie di jQuery. Se lavoriamo spesso con jQuery o jQueryUI, suggeriamo di aggiungere questa pagina all’elenco dei nostri preferiti, perché permette di tenere sempre sott’occhio le principali informazioni (link compresi) su jQuery.