Inicio del plugin Calendario jQuery

  • Por
Comenzamos el desarrollo del plugin de Calendario jQuery. En este paso simplemente mostramos un icono al lado del INPUT para activar el calendario.
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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Fernando Oviedo

29/1/2011
Textbox asp.net
Como podria utilizar ese Calendario en una pagina Asp.net para que me escriba la fecha del calendario en el textbox1 <asp:TextBox ID="TextBox1" runat =server Width="88px" ></asp:TextBox>

jackvendetta

26/2/2011
Inicio Calendario
Un manual estupendo, como siempre en la línea de desarrolloweb. Mi duda es ¿Cómo podría implementarse el mismo calendario pero que apareciera nada más cargarse la pagina (de forma estática) dentrode un div?

freed

26/3/2015
cambio de nacion del calendario
saludos para poder cambiar el idioma de ingles a español hay algun elemto de configuracion.