JS Calendar: Insertar fácilmente fechas desde la web

Escrito el 29 diciembre 2005 por Sebastián Thüer

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.

23 Comentarios Sobre Este Post — Agregar tu comentario

  1. Lenin G

    # 1 junio 17th, 2008

    Gracias por el aporte amigo, pero ya vi

  2. Lenin G

    # 2 junio 17th, 2008

    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

  3. Seba

    # 3 junio 18th, 2008

    #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 :)

  4. Lenin G

    # 4 junio 23rd, 2008

    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?

  5. Seba

    # 5 junio 24th, 2008

    #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!

  6. Lenin G

    # 6 julio 1st, 2008

    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.

  7. Seba

    # 7 julio 2nd, 2008

    #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 ;)

  8. Lenin G

    # 8 julio 3rd, 2008

    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?

  9. Daniel Angel

    # 9 febrero 26th, 2009

    Me funciono bien, todo esta perfecto

  10. Sebastián Thüer

    # 10 febrero 26th, 2009

    @Daniel Angel:

    Que bueno, gracias por comentar! :)

  11. Edgar

    # 11 noviembre 11th, 2009

    Hola amgo, saludos de mi parte para ti. Quisiera consultarte algo respecto a este componente, el caso es que tengo una pagina con un formulario que debe capturar la fecha, hice todo el procedimiento tal cual esta en el ejemplo, pero al mostrar la pagina en el explorador y dar click en el boton, el calendario aparece pero uno o dos segundos mas tarde el contenido del mismo se mueve a la derecha, y el div o recuadro del calendario queda en la misma posicion, asi que se ve desordenado, es raro porq la pagina de ejemplo la ejecuta muy bien en el mismo explorador. gracias por tu ayuda.

  12. Sebastián Thüer

    # 12 noviembre 13th, 2009

    @Edgar: Probablemente esté interfiriendo algún otro script que llamás desde tu página ¿Podrías enviar una captura de pantalla y el código fuente para ver el problema? Saludos.

  13. Edgar

    # 13 noviembre 13th, 2009

    Hola Sebastián!, gracias por tu respuesta. Fijate que estuve haciendo muchas pruebas y el problema estaba en que la carpeta que contiene el javascript y el css del calendario la tenia en una ubicacion diferente a donde estaba la pagina donde lo invocaba (aunque siempre estaba en la raiz del sitio), asi que cambie la carpeta del script a la misma que conteia las paginas y asi funciono muy bien. Extraño el priblema verdad??, pero en fin, ya pudo funcionar muy bien. Muchas gracias por tu tiempo amigo, saludos!!!

  14. Sebastián Thüer

    # 14 noviembre 16th, 2009

    Suerte que pudiste solucionarlo. El tema de las rutas para ubicar los archivos es siempre delicado en los scripts. Un saludo.

  15. MADrod

    # 15 enero 22nd, 2010

    Sebastian, felicitaciones y gracias por la traducción al español del script.
    Te hago una consulta, ¿Has intentado insertar mas de una instancia del script en un mismo formulario? es decir, el típico fecha inicial, fecha final.
    Saludos.

  16. Sebastián Thüer

    # 16 enero 23rd, 2010

    @MADrod: La verdad no he probado insertar más de una instancia. Actualmente para este tipo de funciones en la actualidad estoy usando el framework jQuery, concretamente jQuery UI. Se encuentra fácilmente si lo buscás en Google.

    Saludos y gracias por tu comentario.

  17. luis

    # 17 abril 2nd, 2010

    Como ejecuto desde una funcion ese displayCalendar(document.forms[0].f_ingreso2,’dd/mm/yyyy’,this) por favor ayudenme.

  18. wilder

    # 18 enero 20th, 2011

    tengo un problema no se muestra las imágenes dentro calendario. la estructura que tengo es la siguiente: carpeta calendario-> (calendar.css y .js y la capeta images). a la altura de la carpeta mencionada tengo un archivo php que utiliza el calendario(src=”../calendario/dhtmlgoodies_calendar.js”) pero este no me muestra las imagenes los gifs. cual seria el problema, como deberian ser las rutas, ayudenme xfas.

  19. Felipe Hoil Aguilar

    # 19 febrero 2nd, 2011

    Excelente el JSCalendar, lo tengo instalado en mi web site, junciona a la perfección, si tienen problemas en la instalación, no duden en contactarme y los orientaré, saludos desde Cancun, MX. buscadores@vaguemos.com

  20. Sebastián Thüer

    # 20 febrero 2nd, 2011

    #Felipe: Gracias por tu comentario, un saludo!

  21. Manuel

    # 21 febrero 21st, 2011

    Amigo como hago para ponerlo en español ?

  22. Sebastián Thüer

    # 22 febrero 22nd, 2011

    @Manuel: Hay que abrir el archivo “dhtmlgoodies_calendar.js” y en la línea donde dice “var languageCode = ‘en’;” cambiá el valor por ‘es’.

    Saludos

  23. Jorge

    # 23 agosto 1st, 2011

    Hola Sebastián, tengo un pequeño problema lo que pasa es que no se como hacer que la fecha seleccionada en el calendario aparesca en dos campos de texto dentro del mismo formulario :s , no se si tu me podrías ayudar

Dejar una Respuesta