Los pasos necesarios para utilizar el plugin calendario jQuery para la selección de fechas 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.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...