Pasos para implementar el plugin calendario jQuery

  • Por
Los pasos necesarios para utilizar el plugin calendario jQuery para la selección de fechas en cualquier página web.
A lo largo del manual del calendario jQuery vamos a mostrar cómo realizar, paso por paso, un componente para realizar una interfaz de usuario para la selección de fechas, con Javascript y jQuery. Pero en este artículo vamos simplemente a explicar cómo se utilizaría el plugin que vamos a desarrollar en cualquier página web.

El objetivo de este artículo es mostrar a las personas que tengan un mínimo de conocimientos sobre Javascript, cómo implementar un sistema de calendario, pero sin complicarles la vida con explicaciones sobre cómo está hecho el script. Osea, daremos una simple receta para poder implementar el calendario jQuery en una web.

Vamos a mostrar cómo hacer un calendario como este.

Descarga los archivo del calendario

Los usuarios registrados de DesarrolloWeb.com tienen la descarga disponible del código del calendario.

En ese archivo para descarga vienen varias pruebas de las diferentes etapas del desarrollo del proyecto y los archivos necesarios para poner en marcha el calendario en cualquier web.

Copia los archivos del calendario

En el archivo comprimido de la descarga verás un directorio llamado "calendario_dw". Copia ese directorio en cualquier carpeta de tu sitio web.

Añade la hoja de estilos del calendario

Tendrás que poner la etiqueta de carga de la hoja de estilos CSS que necesita el calendario para que se vea correctamente en tu web.

<link href="calendario_dw/calendario_dw-estilos.css" type="text/css" rel="STYLESHEET">

El lugar adecuado para poner esa etiqueta seria la cabecera de la página y tienes que asegurarte que la ruta hacia la hoja de estilos está correcta.

Incluye los scripts de jQuery y el plugin del calendario

Ahora tienes que colocar los scripts Javascript para incluir el framework jQuery en tu página y el plugin del calendario. Son dos scripts distintos que se deben incluir por separado, con estas dos etiquetas:

<script type="text/javascript" src="calendario_dw/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="calendario_dw/calendario_dw.js"></script>

Nuevamente, tienes que asegurarte que las rutas a los archivos del calendario están bien puestas. Estas etiquetas, en principio, también deberían colocarse en la cabecera.

Coloca el código HTML para mostrar un INPUT de texto

Ahora debes colocar el elemento de formulario que se convertirá en un campo fecha, con un poco de HTML como el que sigue:

<form>
   Fecha: <input type="text" name="fecha" class="campofecha" size="12">
</form>

Convierte el campo de texto en un campo de calendario con código Javascript

El último paso es colocar un script Javascript que invoque el plugin jQuery para hacer que el campo de texto se convierta en un calendario.

<script type="text/javascript">
$(document).ready(function(){
   $(".campofecha").calendarioDW();
})
</script>

Ese script lo puedes colocar en cualquier lado del código HTML y, una vez que cargue la página, hará que el campo de texto se convierta en un campo para escribir una fecha por medio del calendario.

Código completo de una página que utiliza el plugin del calendario

A continuación puedes ver el código completo de una página que hace uso de este plugin jQuery para implementar un selector de fecha.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="es">
<head>
<title>Probando el plugin jQuery de calendario_dw</title>
   <link href="calendario_dw/calendario_dw-estilos.css" type="text/css" rel="STYLESHEET">
   <style type="text/css">
   body{
      font-family: tahoma, verdana, sans-serif;
   }
   </style>
   <script type="text/javascript" src="calendario_dw/jquery-1.4.4.min.js"></script>
   <script type="text/javascript" src="calendario_dw/calendario_dw.js"></script>
   
   <script type="text/javascript">
   $(document).ready(function(){
      $(".campofecha").calendarioDW();
   })
   </script>
   
</head>
<body>
<h1>Plugin calendario</h1>
   
   <form>
      Fecha: <input type="text" name="fecha" class="campofecha" size="12">
   </form>
</body>
</html>

Puedes copiar y pegar ese código HTML y debe funcionarte el calendario, siempre que verifiques que las rutas a los recursos como la hoja de estilos CSS y los scripts están correctas.

Para acabar, puedes ver el ejemplo en marcha en una página aparte.

Esperamos que el plugin del calendario te haya funcionado sin mayor complicación. Podrás comprobar que hemos colocado el calendario con colores básicos en escala de grises, para que encaje en el diseño de cualquier web. Podrás cambiar esos colores y muchas otras cosas en la hoja de estilos CSS. Si haces cualquier cambio que crees que merezca la pena para que lo vean otras personas, por favor envíanoslo para publicarlo.

En el siguiente artículo comenzaremos a explicar paso por paso cómo se ha creado este plugin jQuery.

Autor

Miguel Angel Álvarez

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

rkotik

15/12/2010
Determinar el primer dia de semana
Hola como es posible indicar el primer dia de la semana ya que hay paises en que empieza el domingo y otros el lunes.
Muy bueno el articulo. Gracias.

lor

15/12/2010
Falencia Plugin calendario
Al desplayar los años en el calendario, estos no se borran permanecen en la pantalla. Gracias.

rafael

15/12/2010
problema con script
tengo problema cuando llamo dos script en un pagina html
dice que sale un error de funcion null que solo coje el script que este de segundo el primer script no lo toma.

<script src="calendario.js" type="text/javascript"></script>
<script src="autocomple.js" type="text/javascript"></script>
en este emjemplo solo se puede ejecutar el del autocomple.js y el otro no
que puede ser el error.
gracias por su colaboracion...

x_m

23/12/2010
Problemas al seleccionar las fechas
Muy interesante, podrias indicarme como solucionar estos 2 problemas que se me plantean:
1 - Como evitar que se pueda seleccionar una fecha anterior a la actual?.
2 - En el caso de usarlo para seleccionar 2 fechas (entrada/salida) como evitar que la de salida sea anterior a la de entrada

Muchas Gracias

wilver_gonzalez

04/1/2011
Muy buen DatePicker
Voy a utilizarlo, Pero necesito hacer un cambio.
- !! Que se puedan ingresar fechas manualmente tambien,
tengo usuarios muy hábiles con el teclado !!! quienes seguro se quejarán
de ingresar fechas con el mouse.
Algunas fechas tambien son de años atrás y ellos las ingresan más rapido
vía el teclado.

Si logro hacer esa modificación al objeto! Posteo el cambio!

saludos
waga

rastacielo

04/1/2011
Formato de Calendar
Hola, esta bueno el Calendar..Gracias por compartir...
Tengo problemas con el formato de la fecha. Como tengo que usarlo contra la base datos, me gustaria saber en que linea puedo tocar el formato??
El formato que busco es 01/01/2010 y no 1/1/2010. Uso C#, utilice muchas metodos para que lo pueda convierta de esa manera pero no hubo caso.
Si bien puedo recorrer el array y agregar el "0", si es necesario, pero me parece mas dinamico si toco el "JS".

Alejandro

13/1/2011
Formato de Fechas
Tengo el mismo problema que se posteo anteriormente, necesito que las fechas salgan en formato 01/01/2010, o sea dd/mm/aaaa. Como puedo solucionarlo en el propio código del Jquery.

Saludos y muchas gracias.

Rajeco

23/1/2011
felicitaciones
Muchas gracias por el aporte, me sirvió para mi proyecto.
muchas pero muchas gracias ;)

visualba

29/1/2011
Textbox asp.net
Como puedo utilizr el plugin para que la fecha vaya a un textbox asp.net
<asp:TextBox ID="TextBox1" runat =server Width="88px" ></asp:TextBox>

Muchas gracias

Nacho

02/3/2011
formato fecha
Hola. Yo tambien necesito saber que hay que cambiar para que devuelva la fecha en formato dd/mm/aaaa.

Gracias.

luis_salaya_ayala

28/8/2011
compatibiidad IE6
Hola.

alguna forma q sea compatible con IE6?

cuando lo repodruzco con el IE6 no se desplega el calendario

jairbmx19

11/10/2011
ayuda
el calendario lo implemento en un formulario de registrar donde pido la fecha de nacimiento pero el problema radica en que no puedo retroceder el calendario

Emilio Antonio

04/11/2011
MESES
Hola, en el ejemplo descargable, no puedes 'navegar' o elegir diferentes meses, si por los años.

¿Alguien sabe donde se puede conseguir el calendario completo?

Gracias

david_acurerp

09/11/2011
Formato de Fechas
Hola quisiera saber como colocar el formato de fechas en 01-01-2011 y no 1-1-2011 ya que estoy teniendo inconvenientes en este ultimo formato.

Espero puedan ayudarme

Saludos

Oscar

21/11/2011
Arreglado
Ya tengo arreglado lo del click en el textBox y no se abra el calendario y también lo del formato de fecha por si alguien de ustedes lo necesita me pida la carpeta calendario...

Saludos!!

Manuel

12/4/2012
Formato de Fechas
Hola yo necesito modificar el formato de fechas de 1/1/2012 a 01/01/2012 como lo puedo hacer

thenine09

20/4/2012
Problema con explorer 8.0.7601
He probado este pluginc on diferentes navegadores y funciona perfectamente excepto el la versión 8.0.7601 de Internet Explorer, no se visializan los iconos. En versiones anteriores de explorer esto no ocurre.

Alguna idea del por que?

Saludos

racso

07/2/2013
calendario jQuery... formato fechas
necesito cambiar el formato a YYYY-MM-DD... como lo hago en el còdigo???

Fabian27

18/6/2013
Formato de la fecha
Hola, me gustaria saber si alguien le ha dado solucion al cambio de formato en que se muestran las fechas de este plugin.

Oscar

24/8/2013
Dar las Graciias
Muy bueno me sirvió muchas gracias!!!

gabo

20/2/2014
este calendario en un div emergente
hola, he usado este calendario en jsp fijas y no he tenido problema, pero ahora que lo quiero usar en un div que emerge/abre al dar click en un boton el campo del calendario sale bien pero como tal el calendario sale atras del div y no se puede seleccionar la fecha, esto tiene solucion??? saludos y gracias

marga rita

26/11/2014
la hoja de stylos css
Cual es la ruta para el calendario, en la hoja de stylos ,gracias:-)