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.

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 ciò che viene promesso dalle demo disponibili sul sito di jQueryUI. Un esempio di possibili problemi riscontrabili nel passare dalla teoria alla pratica è discusso qui in riferimento all’implementazione dei menu accordion.

Anche nel caso del datepicker di jQueryUI si posso presentare alcuni problemi quando cerchiamo di implementarlo sul nostro sito. A guardare la demo di jQueryUI sembrerebbe che basti una riga di codice, ma quando incolliamo lo snippet della demo nella nostra pagina il risultato potrebbe essere deludente. Vediamo subito di cosa si tratta, prendendo come riferimento il codice suggerito dalla demo di jQueryUI, disponibile qui.

Se proviamo a utilizzare il campo di tipo “data” esposto sul sito di jQueryUI (link qui sopra) otteniamo un risultato di questo tipo

Figura 1 – Widget datepicker sul sito di jQueryUIdate_picker_01

dove il “piccolo calendario” che appare cliccando sul campo di input è proprio il widget datepicker di jQueryUI. Il codice che lo implementa è teoricamente semplicissimo

che seleziona e applica il widget sul componente avente ID pari a datepicker, cioè:

Se però proviamo a replicare lo stesso codice in locale, all’interno della nostra pagina o applicazione, molto probabilmente troveremo qualcosa del genere

Figura 2 – Widget datepicker in localedate_picker_02

Nelle prossime pagine spieghiamo il motivo di questo strano comportamento, proponendo una soluzione semplicissima.

Dimensioni del font

Dimensioni del font

Il problema di pagina precedente riguarda la dimensione del widget. Quando copiamo il codice della demo all’interno di una pagina già esistente, ovvero nel contesto della nostra applicazione, sito o CMS, il risultato molto probabilmente sarà quello di figura 2. Avremo cioè un widget “enorme” rispetto alle nostre aspettative. Per nostra fortuna la soluzione è semplicissima, perché basta definire nel foglio di stile la dimensione del font della classe CSS usata del widget, ad esempio

Come mai è necessario questo intervento? Si tratta di un bug presente nella distribuzione della libreria jQueryUI? Ovviamente la risposta è no: il comportamento è “as designed”, cioè si tratta di una feature e non di un bug. Spieghiamo perché: quando definiamo le dimensioni delle proprietà CSS, come ad esempio la proprietà font-size, possiamo scegliere tra diverse unità di misura: i punti (pt), i pixels (px) oppure gli “em” (em). I punti non ci interessano perché riguardano la definizione della stampa cartacea. Finché lavoriamo sullo schermo ci interessano soltanto le unità “px” ed “em”. I pixel dovrebbero essere abbastanza intuitivi, perché descrivono semplicemente il numero di pixel da usare per quella dimensione. Usando i “px” diciamo al browser quanti pixel dev’essere spesso un bordo, largo un rettangolo oppure alto un font. Gli “em” rappresentano un caso a parte, perché sono una misura relativa. Ciò significa che assegnando la dimensione di 1em ad un font stiamo dicendo al browser di usare la normale dimensione definita come default in quel momento. Ad esempio, se la nostra pagina sta usando un font di dimensioni 14px, la misura 1em significa esattamente la stessa cosa, cioè 14px. Se invece la nostra pagina stesso usando un font di dimensioni 20px, allora tutto ciò che viene definito come 1em avrebbe dimensione 20px.

A cosa serve l’unità di misura “em”? Lavorando con gli “em” possiamo stabilire le dimensioni relative dei caratteri, cioè dimensioni che dipendono da quelle definite dagli elementi gerarchicamente superiori. Ad esempio, se un div avesse un font impostato a 20px, tutti i caratteri aventi 0.5em risulterebbero con dimensione 10px, cioè la metà. In questo modo, cambiando la dimensione del font nel div contenitore, tutti gli elementi definiti in “em” al suo interno verrebbero proporzionati automaticamente. Si capisce che questo comportamento risulta utile in moltissimi scenari. Nel nostro caso gli sviluppatori di jQueryUI hanno pensato che il widget dovesse avere dimensioni proporzionate a quelle dei nostri caratteri, quindi hanno definito le dimensioni del widget usando come unità di misura proprio gli “em”.

Ecco spiegata l’origine del problema: se la nostra pagina usa un font più grande di quello di default (che è pari a 16px), il widget risulterà più grande della norma. Se la nostra pagina usa un font più piccolo, il widget potrebbe risultare minuscolo. Per ovviare a questi problemi basta sovrascrivere la definizione della classe CSS ui-widget precisando la misura che ci interessa. Se invece vogliamo preservare la caratteristica che permette di proporzionale automaticamente il widget alla pagina, potremmo valutare la soluzione opposta, cioè cambiare le dimensioni del font dell’elemento che contiene il widget.

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.