 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
DHTML Calendar
Un script en Javascript muy fácil de utilizar y con un aspecto formidable, que nos servirá para disponer de un calendario para seleccionar un fecha.
12/5/05 -
Cuando realizamos una interfaz de usuario, es típico tener campos donde el visitante deba introducir una fecha. Éstas tienen formatos bastante estrictos y son complicadas de escribir, por lo que es muy cómodo para el usuario contar con la posibilidad de utilizar un calendario para seleccionar la fecha.
En DesarrolloWeb.com hemos publicado un manual donde se explica cómo construir un calendario con PHP, un conocido lenguaje de programación de webs del lado del servidor. Ahora bien, no siempre el visitante va a tener la capacidad de entender la programación en PHP, o acceso a un servidor que permita la publicación de contenidos programados con PHP.
Por ello, será muy interesante conocer otras maneras de implementar un calendario en una página web. En este caso vamos a presentar DHTML Calendar, un calendario realizado en Javascript, compatible para todos los navegadores. Este script para incorporar un calendario es gratuito, por lo que podemos utilizarlo sin ningún tipo de límite.
Cómo es DHTML Calendar
Es un sistema muy potente y fácilmente configurable, con una interesante interfaz, totalmente dinámica. Se puede incluir de diversas maneras dentro de una página, como un popup, o directamente en el cuerpo de la página, lo que lo hace útil en diversas situaciones.
El script para configurar el calendario variará de un modo de presentación a otro. En la descarga del calendario se ofrecen algunos ejemplos rápidos para mostrar el calendario. Ejemplos para los impacientes, que pueden venir muy bien para empezar rápidamente. Una de las maneras más típicas de presentar el calendario puede ser utilizando un campo de texto y un botón. Al pulsar el botón se muestra el calendario y, una vez seleccionada una fecha, se escribe en el campo de texto.
El código del ejemplo sería el siguiente, muy parecido a uno de los ejemplos para los impacientes proporcionados en el paquete de descarga.
<html>
<head>
<title>Calendario de pruebas</title>
<!-Hoja de estilos del calendario -->
<link rel="stylesheet" type="text/css" media="all" href="calendar-green.css" title="win2k-cold-1" />
<!-- librería principal del calendario -->
<script type="text/javascript" src="calendar.js"></script>
<!-- librería para cargar el lenguaje deseado -->
<script type="text/javascript" src="lang/calendar-es.js"></script>
<!-- librería que declara la función Calendar.setup, que ayuda a generar un calendario en unas pocas líneas de código -->
<script type="text/javascript" src="calendar-setup.js"></script>
</head>
<body>
<!-- formulario con el campo de texto y el botón para lanzar el calendario-->
<form action="#" method="get">
<input type="text" name="date" id="campo_fecha" />
<input type="button" id="lanzador" value="..." />
</form>
<!-- script que define y configura el calendario-->
<script type="text/javascript">
Calendar.setup({
inputField : "campo_fecha", // id del campo de texto
ifFormat : "%d/%m/%Y", // formato de la fecha que se escriba en el campo de texto
button : "lanzador" // el id del botón que lanzará el calendario
});
</script>
</body>
</html>
El código anterior está comentado para que se entienda más fácilmente. Tiene varias partes.
- En la cabecera se incluyen varios ficheros con las funciones y estilos del calendario. Estos ficheros se encuentran en los archivos de descarga del calendario. Existen varios estilos que se pueden utilizar para ajustar el aspecto del calendario al diseño de la página. También se debe incluir el lenguaje en el que presentar el calendario, en este caso español, que está también incluido en el paquete de descarga.
- Ya en el cuerpo de la página, se muestra el formulario. Es muy simple, pues sólo tiene un campo de texto y un botón para mostrar el calendario.
- En el script de javascript, también dentro del cuerpo de la página, se utiliza la función Calendar.setup, que sirve para cargar el calendario y configurarlo con los valores que deseemos. Todas las opciones de configuración tienen valores por defecto, aunque siempre vamos a tener que definir, como mínimo, los datos que ponemos en este ejemplo. El dato "inputField" sirve para indicar el identificador (atributo id) del campo input donde se tiene que escribir la fecha. El valor "ifFormat" sirve para ajustar el formato de la fecha que se desea escribir en el campo de texto. Por último, el valor "button" debe contener el identificador del botón que lanzará el calendario al pulsarlo.
Ha sido un ejemplo lo más simplificado posible. Podemos ver la marcha del calendario que genera este código en una página aparte.
En la documentación podremos encontrar más ejemplos del calendario y una explicación detallada de su utilización.
Más información en la página del producto: http://www.dynarch.com/projects/calendar/
DHTML Calentar es un proyecto alojado en SourceForge.net, con la siguiente página de proyecto: http://sourceforge.net/projects/jscalendar
+ 1 categoria relacionada
+ 1 comentario (Añadir)
+ 14 comentarios no revisados
| Autoría, licencia y acciones sobre este artículo | ||||||
|
Informe de Miguel Angel Alvarez*
Director de DesarrolloWeb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo.
|
| Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar. |
| Se muestra un comentario revisado |
Espero haber sido lo mas claro posible.
Por las dudas:
<!-- script que define y configura el calendario-->
<script type="text/javascript">
Calendar.setup({
inputField : "campo_fecha", // id del campo de texto
ifFormat : "%A %d / %B %I:%M %p", // formato de la fecha que se escriba en el campo de texto
showsTime : true,
button : "lanzador" // el id del botón que lanzará el calendario
});
</script>
<!-- script que define y configura el calendario-->
<script type="text/javascript">
Calendar.setup({
inputField : "campo_fecha2", // id del campo de texto
ifFormat : "%A %d / %B %I:%M %p", // formato de la fecha que se escriba en el campo de texto
showsTime : true,
button : "lanzador2" // el id del botón que lanzará el calendario
});
</script>
Saludos,
 | Añadir un comentario del artículo |
| Comentarios sin revisar |
| Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente. |
 | Ver los comentarios no revisados |
| Añadir un comentario del artículo |
| Enlaces: |
| Maestrosdelweb |
Ir arriba
Lectura recomendada  Compra este libro en Agapea, la librería urgente a domicilio. |
||||||||
Tienda DesarrolloWeb
