JS Calendar: Insertar fácilmente fechas desde la web

Escrito el 29 December 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.

Compartir:

  • Twitter
  • Facebook
  • LinkedIn
  • del.icio.us
  • StumbleUpon
  • Google Buzz
  • Bitacoras.com

Posts relacionados:

  1. Insertar videos de YouTube en Dreamweaver
  2. Google lanza las llamadas por teléfono desde la web
  3. Importar enlaces desde WordPress a WordPress

¿Te gustó? Dejá tu valoración...

Muy MaloMediocreNormalBastante BuenoExcelente | Ya votaron 3 personas
Tu valoración es:
Loading ... Loading ...

17 Comentarios Sobre Este Post — Agregar tu comentario

  1. Lenin G (5 comments)

    # 1 June 17th, 2008

    Gracias por el aporte amigo, pero ya vi

  2. Lenin G (5 comments)

    # 2 June 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 (35 comments)

    # 3 June 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 (5 comments)

    # 4 June 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 (35 comments)

    # 5 June 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 (5 comments)

    # 6 July 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 (35 comments)

    # 7 July 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 (5 comments)

    # 8 July 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 (1 comments)

    # 9 February 26th, 2009

    Me funciono bien, todo esta perfecto

  10. Sebastián Thüer (159 comments)

    # 10 February 26th, 2009

    @Daniel Angel:

    Que bueno, gracias por comentar! :)

  11. Edgar (2 comments)

    # 11 November 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 (159 comments)

    # 12 November 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 (2 comments)

    # 13 November 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 (159 comments)

    # 14 November 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 (1 comments)

    # 15 January 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 (159 comments)

    # 16 January 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 (5 comments)

    # 17 April 2nd, 2010

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

Dejar una Respuesta