DHTML Calendar, el calendario definitivo
Por el 6 de Noviembre de 2008en: Sin categoría
En casi todas las interfaces de usuarios nos encontramos con campos en los que los usuarios tienen que introducir una fecha, las fechas son unos datos muy especiales porque sus formatos son bastante difíciles de comprender por la gran mayoria de los usuarios y son demasiado difíciles de escribir.
Por todo esto lo más cómodo es controlar la introducción de datos del usuario y facilitar su tarea, la solución a todo esto es utilizar un calendario para seleccionar la fecha.
DHTML Calendar es un proyecto alojado en SourceForge.net: sourceforge.net/projects/jscalendar
DHTML Calendar
DHTML Calendar es un calendario muy potente y fácilmente configurable, con una interesante interfaz y 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. Ademas está disponible en diferentes idiomas y nos permite seleccionar fecha y hora.
Descarga DHTML Calendar v1.0
Ver Demo
Documentacion de DHTML Calendar
El código es muy simple y su implementación sólo nos robará unos minutos, veamos un ejemplo:
<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",
ifFormat : "%d/%m/%Y",
button : "lanzador"
});
</script>
</body>
</html>
- Entradas relacionadas: No hay coincidencias
Dejar un comentario
Últimas entradas
- Ya se puede jugar a la nueva versión del Desafío Manager
- Nginx, la alternativa a Apache
- Alguna vez te has preguntado… ¿Cómo gana dinero Google?
- Así ha quedado el sprite de imágenes de la nueva portada de Google
- ¿Será Google el próximo Microsoft?
- La obesidad en las páginas web también es un problema
- ¿Qué sucede con nuestras contraseñas cuando morimos?
- Catull, la tipografia de Google
- “No a todo” en Windows
- Desafío Manager, Manager de fútbol Online
Suscripción
POR RSS
POR EMAIL
Recibe los nuevos artículos de TuFunción directamente en tu email
9 Respuestas a DHTML Calendar, el calendario definitivo
Anónimo
7 de Noviembre de 2008 a las 2:28 am
Parece que el calendario depende de Javascript, y este en cuestión es el enemigo público Nº1 de la accesibilidad, algo tan de moda, y tan demandado en las nuevas contrataciones de diseños/desarrollos web.
Una pena
manu
7 de Noviembre de 2008 a las 5:47 am
La última vez que recurrí al DHTML calendar fue en un panel de administración y porque necesitaba un calendario de fecha y hora, en ese caso no me importaba tanto la accesibilidad por tratarse de un area restringida y la verdad que quede muy satisfecho de su integración en la página.
manu
7 de Noviembre de 2008 a las 5:49 am
Muy buena solucióon Arantxa… es un calendario mucho más limpio que el DHTML pero como digo en mi otro comentario la gran mayoria de calendarios no incluye la posibilidad de seleccionar la hora y casi siempre que tienes un campo fecha hay que darle la opción de incluir la hora ya que los formatos de horas también resultan muy complicados a los usuarios.
Un saludo y gracias por la aportación
jorge
21 de Febrero de 2009 a las 1:06 pm
jdoder no pasa nada con esta pagina ook basuras
Arantxa
7 de Noviembre de 2008 a las 2:52 am
Hola,
hace tiempo usaba ese, ahora eso de la accesibilidad, uso este
http://www.niquelao.net/acc_calendar-calendario-accesible-en-javascript-innecesario-pero-util/
Aunque también utiliza javascript, lo hace en menor medida, y es más accesible que el DHTML Calendar.
Y no me pagan por hablar bien de el….
Leandro
7 de Noviembre de 2008 a las 8:25 am
Tambien pensaba que DHTML Calendar era el calendario definitivo, ya que anda bárbaro en todos los navegadores. Lamentablemente comprobé que en paginas demasiado extensas verticalmente, al hacer click sobre el input el calendario aparecia muy arriba y la gente no lo encontraba. Lo tuve que reemplazar por dos select de mes y dia que nunca fallan. Una lástima.
manu
7 de Noviembre de 2008 a las 9:15 pm
Pues si no habia detectado el problema que me comentas… pero de ser asi es una verdadera lástima aunque yo sería partidario de utilizarlo en aquellas páginas que no presenten este problema.
Sergio
13 de Abril de 2010 a las 2:56 pm
A ver, soy nuevo en esto de HTML, JavaScript y demás. Estoy de prácticas y tengo un problemilla con el calendario.
La página que tengo que crear consiste en un formulario y la verdad que bastante extenso, quisiera saber si sabeis alguna forma de poder poner el calendario en varias posiciones, ya que mi formulario consta de unos cuantos campos tipo fecha. Lo bueno sería que en cada uno de los campos tipo fecha junto a un icono de mini calendario que he puesto para que se despliegue este justo encima o debajo apareciese el calendario.
Si sabeis algo, comentarmelo por favorl. Gracias
Paranoico
27 de Mayo de 2010 a las 2:48 pm
Sergio, en Calendar.setup puedes usar el parámetro position
Calendar.setup({
…
position : [250,290]
…
});