Utilizar el calendario que incorpora el API de Joomla

Cuando se crea un componente es muy habitual crear formularios en los que el usuario tiene que introducir fechas. Esto puede ser un problema, ya que las fechas han de ir en un formato específico para que puedan ser procesadas en el servidor (con PHP).

Joomla incorpora un datepicker (calendario) que utiliza en el backoffice. Vamos a ver como utilizar este calendario en un componente creado por nosotros.

Para implementar el calendario en la parte de backoffice simplemente hay que llamar a la función JHTML::_(‘behavior.calendar’), que se encarga de incluir los ficheros necesarios donde se haya el objeto javascript que genera el calendario. Luego hay que escribir un formulario HTML con una llamada javascript que se encargará de generar el calendario. A continuaciónse puede ver un ejemplo de calendario implementado en un componente de backoffice de Joomla.

1
2
3
4
5
6

<?php JHTML::_('behavior.calendar'); ?>
<form>
<input id="fecha" name="fecha" size="20" type="text" />
 
<img class="calendar" onclick="return showCalendar('fecha', '%Y-%m-%d');" src="templates/system/images/calendar.png" alt="calendar" />
</form>

Primero se crea el textbox y después se crea una imagen, la ruta de la imagen es la misma que se usa en los calendarios del backoffice.  En el evento click de la imagen se añade el siguiente código:

1

onclick="return showCalendar('fecha', '%Y-%m-%d');"

Este código es el que crea el objeto calendario y lo muestra o lo esconde según convenga. El primer parámetro es el id del textbox donde se guardará la fecha y el segungo parámetro es una cadena que indica el formato de fecha usado. En este caso, se creará una fecha del tipo 2009-02-24. Si se desea otro formato de fecha solamente hay que cambiar esta cadena , por ejemplo, %d/%m/%Y generaría 26/02/2009. El resultado de usar el calendario es el siguiente:

Si se usa el mismo código en el frontend no funcionará, ya que en el backoffice se carga automaticamente un fichero javascript con funciones para facilitar este tipo de tareas. Para que funcione en el frontend carga el fichero javascript “includes/js/joomla.javascript.js”, donde está definida la función showCalendar.