Aggiungere l’ora al controllo calendario in Joomla

Se si sta sviluppando un componente personalizzato per Joomla, il framework del CMS ci mette a disposizione un apposito controllo di tipo “calendario” da poter utilizzare nelle form quando l’utente deve inserire una data.

Ma se avete bisogno di richiedere anche l’ora, abbiamo buone notizie: l’opzione è già praticamente disponibile, basta attivarla con pochi semplici passaggi. Vediamo come.

Il controllo calendario

Quando in una form si chiede all’utente di inserire una data, è abitudine fornire all’utente un calendario visuale che gli permetta di selezionare la data anzichè scriverla.

In Joomla potete vedere questo comportamento, ad esempio, nella maschera di inserimento di un nuovo articolo: vicino al campo “Data di pubblicazione”, la piccola icona del calendario ci consente di selezionare la data.

Usare il calendario nei nostri componenti

Per aggiungere tale visualizzazione a un componente personalizzato, la sintassi è abbastanza semplice

JHTML::_('behavior.calendar')

include il JavaScript necessario, mentre

echo JHTML::_('calendar', $value, $name, $id, $format)

crea il campo di input vero e proprio. La scelta effettuata cliccando sul calendario verrà riportata nel campo di input secondo il formato specificato.

Per ulteriori dettagli sull’uso dei parametri indicati vi rimando a http://api.joomla.org/Joomla-Framework/HTML/JHTML.html#calendar

Aggiungere la scelta dell’ora

Per un componente specifico, avevamo bisogno di aggiungere anche la scelta dell’ora. Tuttavia, una rapida ricerca nei parametri del metodo pareva escludere questa possibilità. Allora siamo andati più a fondo.

Una rapida indagine ci ha portato a scoprire che lo script utilizzato è calendar.js di www.dynarch.com.

N.B. l’autore nel frattempo ha sviluppato una versione completamente nuova, commerciale, dello script, mentre quella utilizzata in Joomla è la vecchia versione. Tuttavia, stando al CHANGELOG anche questa vecchia versione include l’opzione della scelta dell’ora. Dunque?

Esaminando il codice originale (non compresso) abbiamo scoperto che per default tale opzione è disabilitata.

Per abilitarla, è sufficiente aprire il file:

/media/system/js/calendar-setup.js

e modificare la voce

param_default("showsTime",false);

in

param_default("showsTime",true);

Tah-dah!

Altre informazioni utili

1. Per motivi, credo, di “disordine storico” esistono nella cartella /includes/js altre copie dello script. Dalle nostre prove, quella in /media/system/js è l’unica utilizzata.

2. Avendo scaricato il pacchetto completo dal sito dell’autore, abbiamo avuto modo di constatare che contiene numerosi CSS alternativi;  per usarli, è sufficiente rinominarli in

calendar-jos.css

e sostituirli a quello esistente in

/media/system/css

Così ora abbiamo un calendario più carino, in tinta con il nostro sito 🙂

3. Attenzione a non modificare altrove lo stile dell’elemento “button” senza verificare che anche il vostro calendario potrebbe essere modificato.

4. E infine, con un piccolo hack potete fare in modo che i minuti avanzino di 5 in 5 anzichè uno alla volta: lo trovate qui:

http://www.dynarch.com/projects/calendar/old/#Kcomment-57