JS Calendar: Insertar fácilmente fechas desde la web


Introducir fechas en los formularios vía web suele ser una tarea tediosa: el HTML no provee de un componente específico para ello. Sin embargo, mediante la combinación de JavaScript y Hojas de Estilo (CSS), es posible crear ventanas desplegables que permitan seleccionar una fecha de un modo mucho más intuitivo y natural.

Buscando algún script que me permitiera realizar esto me topé con el sitio DHTML Gooodies. Allí encontré JS Calendar, que cumple con esta función a la perfección. Permite introducir una fecha seleccionando día, mes y año, además de mostrar el número de la semana y la fecha actual.

Basta simplemente con colocar un botón al lado de el o los campos destinado a introducir la fecha, para que al hacer clic se muestre la venta. Cuando el usuario selecciona una fecha, automáticamente los campos se llenan con el valor elegido.

Se puede emplear un único campo texto separado con números separados por barras (ej: 01/01/2006) o puntos (ej: 01.01.2006). Otra opción es usar las listas desplegables estilo combo box que permiten elegir días del 1 al 31, meses de Enero a Diciembre y el año. Puede verse en la web un ejemplo de cómo funciona.

Su uso es muy sencillo, la ventana que muestra práctica y estéticamente cuidada. La única desventaja que tenía es que entre los posibles idiomas no estaba el español.

Decidí, entonces, hacer la traducción –que no era gran tarea, por otra parte- y enviársela al autor, Alf Magne Kalleland, para que estuviese disponible a todos los usuarios. Amablemente acaba de actualizar el script, que ahora incorpora la lengua de Cervantes.

Información y enlaces

Formá parte de la comunidad comentando, revisando lo que otros dijeron o agregando un enlace deste de tu blog a nuestros posts.

Tags

Otros Artículos
Diario de Viaje: Nueva Sección
Sitio G-byte.com.ar liberado (beta)

Comentarios

Gracias por el aporte amigo, pero ya vi

ay me le aprete accidentalmente, jeje decía que si hay soporte para español, pero desgraciadisimamente casi no se nada de coo usarlo en una pagina de html, que hare me podrias ayudar con un manual?, mi correo es lenin500@hotmail.com, muchisimas gracias

#Lenin G→ Creo que lo mejor es que mires la página de ejemplo que el autor tiene con varios casos de uso. Es esta: http://www.dhtmlgoodies.com/scripts/js_calendar/js_calendar.html

Ahí podés mirar el código HTML y ver cómo lo han usado. Hay otros scripts que hacen lo mismo pero este me parece de los más sencillos que hay dando vueltas. Un saludo y suerte :)

Hola, si la revise y hay varios ejemplos, pero no se interpretar muy bien ese codigo para incluirlo simplemente al lado de un campo text de una pagina html, ¿no me echas una mano?

#Lenin G→ Tenés que hacer lo siguiente: En el HEADER de tu página (entre las etiquetas <head> y </head> colocás estas líneas…

<link type=”text/css” rel=”stylesheet” href=”ruta/dhtmlgoodies_calendar.css” media=”screen”></LINK>
<SCRIPT type=”text/javascript” src=”ruta/dhtmlgoodies_calendar.js”></script>

Después, en el botón o imagen que se va a presionar para que muestre el calendario, hay que agregar el evento onclick con esto:

onclick=”displayCalendar(document.forms[0].theDate6,’d.m.yyyy’,this)”

Si fuese un campo de texto + un botón quedaría así:

<input type=”text” value=”5.10.2000″ name=”theDate1″><input type=”button” value=”Cal” onclick=”displayCalendar(document.forms[0].theDate1,’d.m.yyyy’,this)”>

Fijate que en INPUT tenés el atributo name con el valor “theDate1″, en onclick tenés que repetir ese mismo nombre después de forms[0].

¡Suerte!

Hola, muchisimas gracias, por tu aporte y si ya logre que me funcionara y en realidad fue muy facil, solo que siempre me aparece una fecha de manera estática, mi pregunta es ¿Como le hago para que siempre me seleccione por default la fecha de hoy asi como el windows?, Gracias por tu atención eres muy amable.

#Lenin G→ Me alegro que ya te funcione. Por lo de la fecha, a mí automáticamente me toma le fecha del día de hoy. Estoy investigando porque quiero cambiarla ya que para poner una fecha de nacimiento hay que hacer varios clics hasta dar con el año en cuestión. Si encuentro algo aviso ;)

Hola, nuevamente, oye como le haces para que te tome la fecha de hoy? de manera automática?, insertas código o algo?, Ah y algo más ya lograste cambiar el formato de presentación de fecha?, es decir en vez de 06/30/2008 (junio 30 del 2008=inglés) a 30/06/2008 (30 de junio del 2008) y si es así como le hiciste?

Agregá un Comentario

Tomate un minuto y decime qué pensás. Podés usar algunos tags HTML para dar formato al texto.