"No se equivoca el ave que ensayando el primer vuelo cae al suelo...Se equivoca aquella que por temor a caerse, renuncia a volar "

Soy una persona apasionada por todo lo que tiene que ver con Internet y las nuevas tecnologías. Soy autodidacta, y me encanta impartir clases...


Calendario con Javascript y CSS

Domingo 08 de Agosto de 2010

Javascript
Autor: César Cancino
Categoría: Javascript
Etiquetas Programación, php, mysl
Comentarios 20

Este es un script que nos permitirá implementarle a nuestros formularios la posibilidad de que los usuarios puedan ingresar fechas a través de un elegante calendario construido con javascript y css. Trabaja con unas librerías que están incorporadas en el link de descarga

¿Qué te gustaría compartir con nosotros?

Compartir

Este es un script que nos permitirá implementarle a nuestros formularios la posibilidad de que los usuarios puedan ingresar fechas a través de un elegante calendario construido con javascript y css.
Trabaja con unas librerías que están incorporadas en el link de descarga.

A continuación les muestro una sencilla manera de implementarlo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<link href="css/calendario.css" type="text/css" rel="stylesheet">
<script src="js/calendar.js" type="text/javascript"></script>
<script src="js/calendar-es.js" type="text/javascript"></script>
<script src="js/calendar-setup.js" type="text/javascript"></script>
</head>

<body>
<input type="text" name="ingreso" id="ingreso" value="dd-mm-yyyy" />

<img src="ima/calendario.png" width="16" height="16" border="0" title="Fecha Inicial" id="lanzador">
<!-- script que define y configura el calendario-->
<script type="text/javascript">
Calendar.setup({
inputField : "ingreso", // 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>




20 Comentarios

  1. Pilar
    Martes 01 de Octubre de 2013

    Gracias por el aporte! Nos salvaste la pega!

  2. Antonio Segura Cantero
    Lunes 10 de Junio de 2013

    Interesante artículo, gracias por el calendario. Me parece interesante las opciones que tiene sobre cambio de mes, año.

  3. dankodigo
    Lunes 01 de Abril de 2013

    Gracias maestro.

  4. Cristopher Ponce
    Martes 08 de Enero de 2013

    Gracias me sirvió de mucha ayuda ya que estoy recién empezando en esto de la programación muchas gracias

  5. Walter
    Jueves 27 de Septiembre de 2012

    Hola Como puedo hacer para asociarlo a un campo (en este caso Fecha_Nac) Gracias

  6. santiago
    Lunes 27 de Agosto de 2012

    tengo un problema es q no me aparece la imagen del boton para el formulario ni me abre

  7. Roberto Cuj
    Sábado 05 de Mayo de 2012

    Estimado Cesar: tengo una tabla el campo se llama primaneta float 10,2 al guardar la informacion solo me pone 2 digitos pro ejemplo la cantidad de 16030.52, solo me guarda 16, alguna sugerencia para solucionarlo. Gracias de antemano

  8. utri
    Lunes 06 de Febrero de 2012

    que tal gracias por el aporte pero no logro hacer que corrar al clikar la imagen agradeceria tu ayuda

  9. martin
    Martes 14 de Junio de 2011

    hola quisier cambiarel color del calendario, como podria hacerlo? Gracias

  10. Ximena Moreta
    Jueves 09 de Junio de 2011

    Hola, Sony principiante en web, por favor me puedes enviar el calendario.

  11. lexgrey
    Miércoles 01 de Junio de 2011

    Hola César, tengo un pequeño problema con el calendario y las tildes. Si pongo : Las tildes del calendario me salen bien pero las tildes de los campos de la base de datos no salen. En cambio si pongo : Los campos de la base de datos salen bien pero no salen las tildes del calendario. Se te ocurre como solucionarlo? Gracias por todo.

  12. Darry
    Lunes 25 de Abril de 2011

    Hola buenos dias cesar, mira estoy usando esta aportte tuyo, pero quiero saber me digas como puedo hacer que los usuarios no puedan seleccionar (Copiar) las fecha ya escogida directamende del text... Ya le coloque la opcion de readonly="yes" pero todabia puedo meter el cursor en el text y seleccionar lo escrito, yo quiero que solo se pueda ver mas nada no seleccionar la fecha escogida.. yo usuario despliego el calendario y escojo el dia del mes y listo mas nada, no lo introducido en el text..

  13. Abraham
    Miércoles 06 de Abril de 2011

    Buenisimo, ahora si quiero porner 3 campos de fecha en la misma pagina como le hago?. Espero me puedas ayudar y muchas gracias. Saludos desde México

  14. Gonzalo de Quit Ecuador
    Martes 01 de Febrero de 2011

    Muy bueno el codigo, lo probe en un hoja web en blanco y me funciono perfectamente, cuando lo pase a un programa con un fondo diferente, no me sale el fondo.

  15. Ramiro Carbonell
    Lunes 20 de Diciembre de 2010

    lo siento, que tonto soy. ya se donde está

  16. Ramiro Carbonell
    Sábado 18 de Diciembre de 2010

    saludos maestro, disculpe la pregunta pero no encuentro el link de descarga de las librerias del calendario. podria ayudarme

  17. LuisDavid
    Martes 14 de Diciembre de 2010

    Buenisimo, me servira mucho para mi desarrollo de un sistema de matricula online para un centro de idiomas... saludos desde Peru

  18. boneyking
    Miércoles 27 de Octubre de 2010

    sabes Cesar cuando hago submit la fecha me cambia de d-m-Y a Y-m-d hh:mm:ss. hay forma de controlar eso?

  19. Luis Ek
    Jueves 16 de Septiembre de 2010

    Excelente codigo, justo lo que andaba buscando,... gracias por todas tus aportaciones, me han servido muchisimo... Saludos, desde México!

  20. Lenin
    Miércoles 13 de Octubre de 2010

    Excelente Cesar..., es justo lo que estaba buscando, encontre un codigo pero solo me servia para IE, pero este me funciona para cualquier navegador.