A partir de este artículo vamos a ver paso a paso cómo hemos realizado el desarrollo del plugin Calendario jQuery. Como es un componente relativamente complejo, hemos dividido el desarrollo en varias etapas de dificultad creciente. A lo largo de las distintas etapas iremos creando todo el sistema de calendario, de modo que en este primer artículo simplemente hemos realizado una pequeña parte de nuestros objetivos finales.

De momento vamos a ver cómo comenzar el desarrollo del plugin y cómo podríamos hacer para convertir un campo INPUT en un selector de fechas. Esto quiere decir, cómo hacer que un campo de texto de formulario pase a ser un selector de fechas, colocando dinámicamente un iconito para abrir el calendario a la derecha del campo INPUT.

En este primer artículo realizaremos los pasos para obtener lo que se puede ver en este enlace.

Creación inicial de un plugin

Los plugins de jQuery permiten realizar código fácilmente portable a tantos desarrollos como se desee. Para ello, se deben respetar una serie de normas, que aseguran que el plugin se pueda utilizar en cualquier entorno sin problemas. En DesarrolloWeb.com explicamos anteriormente las reglas para el desarrollo de plugins jQuery, por lo que no vamos a repetirlas ahora.

De momento nuestro plugin tiene el siguiente código:

jQuery.fn.calendarioDW = function() {
this.each(function(){
      var elem = $(this);
      //creo un enlace-botón para activar el calendario
      var boton = $("<a class='botoncal' href='#'><span></span></a>");
      //inserto el enlace-botón después del campo input
      elem.after(boton);
      
      //evento para clic en el botón
      boton.click(function(e){
         e.preventDefault();
         mostrarCalendario();
      });
      //evento para clic en el campo
      elem.click(function(e){
         this.blur();
         mostrarCalendario();
      });
      
      //función para mostrar el calendario
      function mostrarCalendario(){
         alert("Muestro el calendario");
      }
});
return this;
};

En resumen, hemos realizado la creación dinámica de lo que llamamos un "enlace-botón" que sirve para que el usuario lo pulse para abrir el calendario. Ese enlace, como se puede ver, tiene dentro un SPAN y realmente no tiene ningún texto escrito, sino que asociaremos unos pocos estilos CSS para convertirlo en un botón.

a.botoncal{
   margin-left: 5px;
   background: transparent url(calendario.png) no-repeat;
}
a.botoncal span{
   display: inline-table;
   width: 16px;
   height: 16px;
}

Una vez creado el enlace, lo inserto justo después del INPUT, con una llamada al método after().

Posteriormente creamos un par de eventos clic, asociados al elemento INPUT y al botón-enlace generado. Esos dos eventos clic lo único que hacen es llamar a la función para mostrar el calendario.

El código del plugin acaba creando la función que sirve para mostrar el calendario. De momento a esta función sólo le hemos colocado el código de un alert() para mostrar un mensaje, pero claro que en el futuro haremos mucho más trabajo para completarla.

Poner el calendario en marcha

Recordar que nos haría falta crear el INPUT e invocar al plugin del calendario. Esto se haría con este el código HTML:

<input type="text" name="fecha" class="campofecha" size="12">

Y con el Javascript siguiente:

$(document).ready(function(){
   $(".campofecha").calendarioDW();
})

Podemos ver el ejemplo tal como se ha realizado hasta este punto.

En el siguiente artículo mostraremos el layout HTML que pensamos utilizar para nuestro calendario.