Agregando el Calendario de Joomla a nuestras campos de formularios
En ocasiones requerimos en nuestros sitios datos insertados por los usuarios, afortunadamente Joomla! cuenta con una serie de elementos que hacen mas amena esta tarea, el día de hoy quiero explicar como insertar el calendario de Joomla! tal y como lo vemos en la parte administrativa en las opciones de publicación al editar un articulo.
Calendario joomla
Bueno como indique Joomla! cuenta con un calendario el cual es el «The New Coolest DHTML Calendar» como lo pueden ver en el archivo ubicado en: JOOMLA/media/system/js/calendar-uncompressed.js.
Agregando el calendario a un modulo Manos a la obra
Para explicar como agregar el calendario voy a crear un simple modulo, si el lector no esta familiazidado con esto le suguiero revisar el articulo creando un simple modulo para que se contextualice(aunque tratare de explicar a detalle cada parte del modulo que vamos a crear). Este modulo es solo para fines de muestra por lo cual su funcionamiento es casi nulo, los archivos que los conforman son los siguientes:
. ├── mod_example_calendar.php <-- Este es el modulo ├── mod_example_calendar.xml <-- Archivo de la declaración del modulo └── tmpl └── default.php <-- Vista por defecto del modulo
Bueno el archivo mod_example_calendar.xml esta conformado por la declaración del modulo, este archivo es usado en el momento en el que instalamos el modulo desde el manejador de extensiones, también aquí se declaran los archivos que utiliza, los archivos de traducción, también contiene información acerca la versión y del desarrollador.
El archivo mod_example_calendar.php es el modulo en sí, es lo que visualizamos, sin embargo aquí se suele agregar lógica de pre-procesamiento y por lo general se suele apoyar de Helpers ó ayudantes(el cual no es el caso ya que es un modulo muy simple), veamos el código que contendrá nuestro modulo:
<?php
/**
* @package Joomla.Site
* @subpackage mod_example_calendar
*
* @copyright Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
require JModuleHelper::getLayoutPath('mod_example_calendar', $params->get('layout', 'default'));
No hay mucho que explicar en dicho código solo que la linea defined('_JEXEC') or die; nos indica que para que se pueda ejecutar el archivo se deberá mandar a llamar desde el entorno de ejecución de Joomla! (_JEXEC) y en caso contrario el script detiene su ejecución(se muere die).
La siguiente linea require JModuleHelper::getLayoutPath('mod_example_calendar', $params->get('layout', 'default')); nos indica que va a mandar a cargar una vista por defecto(el default layout).
Finalmente hemos llegado a la parte mas interesante de la explicación, la cual corresponde al archivo vista por defecto el archivo ubicado en /tmpl/default.php. Lo primero que hacemos es mandar a cargar todo lo necesario para la ejecución del calendario:
// Agregamos el calendario
JHTML::_('behavior.calendar');
Ahora imaginemos que tenemos un formulario con el siguiente código HTML :
<input id="mod-ex-cal" type="text" name="fecha" tabindex="1" size="18" placeholder="Fecha" />
<a href="#" id='mod-ex-cal-ctrl' title="Inserte la fecha">Insertar fecha</a>
Lo queremos es que el calendario funcione sobre el input con con ID mod-ex-cal y que el enlace que dice «Insertar fecha» sea el control que dispare el calendario (el que tiene un ID mod-ex-cal-ctrl), veamos como se hace esto:
//En el domready mandamos a viculamos el evento del click del calendario
$doc =& JFactory::getDocument();
$doc->addScriptDeclaration('window.addEvent(\'domready\', function() {Calendar.setup({
inputField : "mod-ex-cal", // ID del input en donde vamos a instanciar el calendario
ifFormat : "%Y-%m-%d", // Formato de la Fecha
button : "mod-ex-cal-ctrl", // ID del control el cual dispara el calendario
align : "Tr", // Alineación (Top right - Esquina superior Derecha)
singleClick : true
});});'
);descargar código fuente del ejemplo | Visualizar el código fuente en Linea
