Calendario Javascript para usar en formularios

Calendario Javascript para usar en formularios
Si tienes la necesidad de agregar un campo en el cual se recoja una fecha y quieres que al presionar salga un calendario para que el cliente o la persona que este llenando el formulario seleccione la fecha de una manera simple, esta es la solución.
 
Hace poco tuve la necesidad para un trabajo de colocar una opción en un formulario donde un cliente selecciona la edad de nacimiento, después de buscar mucho encontré este calendario hecho en Javascript con muchas funcionalidades y fácil de aprender a usar.
 
Paso 1: Incluir en la cabecera, nuestro archivo java script.

Calendario JavaScript

Codigo:
-------------------------------------------------------------------------------------------------
    <link rel="stylesheet" type="text/css" href="/src/css/jscal2.css" />
    <link rel="stylesheet" type="text/css" href="/src/css/border-radius.css" />
    <link rel="stylesheet" type="text/css" href="/src/css/steel/steel.css" />
    <script type="text/javascript" src="/src/js/jscal2.js"></script>
    <script type="text/javascript" src="/src/js/lang/es.js"></script>

-------------------------------------------------------------------------------------------------

Paso 2: Le aginamos al formulario el input correspondiente al campo que llama al calendario en Javascript.

Calendario JavaScript

Codigo
-------------------------------------------------------------------------------------------------------
<label for="f_rangeStart">Campo Fecha:</label> </td>
<input size="15" id="f_rangeStart" />
<button id="f_rangeStart_trigger">...</button>
<button id="f_clearRangeStart" onclick="clearRangeStart()">Limpiar</button>
                
                 <script type="text/javascript">
                 RANGE_CAL_1 = new Calendar({
                         inputField: "f_rangeStart",
                         dateFormat: "%Y/%m/%d",
                         trigger: "f_rangeStart_trigger",
                         bottomBar: false,
                         onSelect: function() {
                                 var date = Calendar.intToDate(this.selection.get());
                                 LEFT_CAL.args.min = date;
                                 LEFT_CAL.redraw();
                                 this.hide();
                         }
                 });
                 function clearRangeStart() {
                         document.getElementById("f_rangeStart").value = "";
                         LEFT_CAL.args.min = null;
                         LEFT_CAL.redraw();
                 };
                </script>

-------------------------------------------------------------------------------------------------------

En este código podemos seleccionar el formato de la fecha en la opción:
-------------------------------------------------------------------------------------------------------
                         dateFormat: "%Y/%m/%d",
-------------------------------------------------------------------------------------------------------

Pagina de ejemplo completa.

Pagina de ejemplo simple.

Archivos necesarios a subir.
 
 
calendario javascript formulario / новости челябинск мир 74 / formulario de Calendario /

Escribir un comentario

Código de seguridad
Cambiar codigos
*Introducir código.

Comentarios  

# Lida 28-02-2018 13:26
2008.Acessível dentro de: Admissão dentro de: 28 ago.
Responder
# fietsuniek.tk 24-02-2018 11:47
Hoe gaat de stad nu precies van 150 naar 400 euro?
Responder
# Tricia 18-02-2018 17:23
A fim de determinados olhares, pessoas que fascinam.
Responder
# João 29-01-2018 07:50
Como Restabelecer Uma Empresa em Declínio?
Responder
# between Islands 24-01-2018 02:52
What's up to all, it's really a fastidious for me to pay a visit this web site,
it includes valuable Information.

Look into my website: between Islands: http://Celsa0498388979.Blog.fc2.com/blog-entry-1.html
Responder
# jorge ortiz 18-05-2017 16:12
muy bueno el calendario, pero como puedo ocuparlo en una grilla, es lo que necesito hacer pero no logro hacerlo , si me dieras unos tips te lo agradeceria

saludos
jorge ortiz
Responder
# Ricardo 09-10-2014 10:21
Muchas gracias por el script, es muy util. Saludos
Responder
# Ivan Gonzalez 08-07-2014 12:33
Lo malo es que no se pueden poner 2 calendarios, lo intente pero solo sale uno, que son requeridos para "Fecha de ingreso" y "Fecha de Salida" para una web de un hotel. Dime que debo hacer para que queden funcionando los 2. si puedes hacerme el favor y me escribes a mi correo, que lo necesito urgente ya que veo que este es el que mas funciona mejor.
Gracias
Responder
# julian 10-04-2014 23:29
Muchas gracias...de verda esta muy bno el calendario...
Responder
# Pamela 04-03-2014 13:03
hola! excelente aporte!!! funciona excelente muchas gracias... pero tengo 2 problemas primero tengo 3 calendarios en la misma página (php) y me muestra sólo el primero que agregué a mi formulario. y el otro es que necesito mandar la fecha a mi base de datos en mysql.
necesito: 'fecha nacimiento' (funciona), 'fecha ingreso' y 'fecha fin' (estos últimos no funciona)
Muchas gracias =)
Responder
# poncho 25-12-2013 04:36
excelente calendario, pero no envia la fecha cuando doy click sutmit , con un formulario POST . que script hay para envio POST , gracias
Responder
# leonardo alacid 14-11-2013 07:02
Gracias por el aporte yo usaria esto con bootstrap y poniendo una imagen de un calendario para la fecha! Saludos
Responder
# Dante 18-10-2013 10:49
Muchas gracias!!
solo tengo una duda,,, en la parte del calendario q sale el mes y el año (oct 2012)en este caso,, no me aparece centrado,, ¿que puedo hacer?

muchisimas gracias
Responder
# Emilio 09-09-2013 09:59
Quisiera saber como hacer para que el calendario empieze con el dia domingo en vez del lunes?
gracias.
Responder
# Emilio 09-09-2013 09:47
Hola, necesito saber como hacer para que el calendario comienze con el dia domingo en vez del lunes?
No doy con la solucion.

Desde ya muchas gracias.
Responder
# CristianPadilla 24-07-2013 11:54
Exelente plugin. pero lo malo es que no se pueden poner 2 calendarios, lo intente pero solo sale uno, que son requeridos para "Fecha de ingreso" y "Fecha de Salida" para una web de un hotel. Dime que debo hacer para que queden funcionando los 2. si puedes hacerme el favor y me escibes a mi correo, que lo necesito urgente ya que veo que este es el que mas funciona de todos los que e visto en la red. gracias de antemano
Responder
# Anonimous 10-07-2013 13:56
Hola, tu código me ayudo bastante, muy bien! esta excelente el script
Responder
# verous 01-07-2013 20:37
no me muestra la imagen del calendario a que se debe...
Responder
# yessi 01-07-2013 18:06
hola lo estoy usando y esta muy bueno,
alguien me puede decir como poner el campo fecha en un imput y el dia de la semana que se eigio en otro, desde ya gracias
Responder
# juan 30-06-2013 16:51
hola, me gusto mucho tu aporte, pero como hago si en un calendario escojo digamos el 30/06/2013 y el segundo calendario no permita seleccionar fechas menores a la escogida en el primer calendario si no igual o mayores....desde ya gracias por sus respuestas..
Responder
# Raul 19-06-2013 14:23
GENIAL el código y su autor !!!
Responder
# Angel Blanco 26-03-2013 20:02
Hola amigo disculpa tengo una pregunta...
Resulta que quiero ingresar la fecha que me esta dando tu script a una BD elaborada en mysql, mi campo de fecha en mysql esta definido como "DATE" pero no me lo ingresa, solo me aparece a la hora de insertar la fecha asi

--> 0000-00-00
necesito principalmente obtener el "valor" de la caja de texto hecha en JavaScript para asi poder manipular la fecha, o que me sugieres amigo?
Responder
# jhowack 19-03-2013 11:15
Cito a dani:
muchas gracias, es estupendo. Solo tengo una duda...me gustaría que se cerrara el calendario al hacer click en el día que eliga. ¿ es posible ? gracias


Tienes que cambiar el nombre del objeto al que hace referencia, es decir cambiar LEFT_CAL por RANGE_CAL_1, si lo nombraste igual que el ejemplo
Responder
# marco 27-01-2013 23:45
como puedo evaluar la fecha para que al momento de enviar la informacion del formulario si la fecha sea menor a la actual me marque un error?
Responder
# Lis 16-01-2013 05:30
Hola a todos! He conseguido implementar el calendario, cuando pulso sobre el botón se despliega pero hacia arriba, sé que está ahí pero sólo se ve el filo de abajo, no se ve porque sale muy arriba, qué puedo hacer para que se vea completo? Saludos y gracias!
Responder
# jose luis avend 15-01-2013 14:51
gracias, una herramienta muy util para mi proyecto, la vida te de más...
Responder
# dani 09-12-2012 19:07
muchas gracias, es estupendo. Solo tengo una duda...me gustaría que se cerrara el calendario al hacer click en el día que eliga. ¿ es posible ? gracias
Responder
# Alexander 28-11-2012 00:24
tengo un inconveniente, lo trato de implementar en jsp y al ver la vista previa en dreamweaber funciona muy bien, pero al ejecutarlo en el servidor (apache) no me muestra el calendario...
Responder
# missael 06-11-2012 17:36
porque solo puedo colocar un calendario en el html..e intentado colocar 2 cajas de texto con la opcion y solo me muestra el calendario en 1
Responder
# carlos 05-11-2012 22:15
checate que la ruta del archivo este bien saludos
Responder
# jenny 30-10-2012 12:08
excelente aporte amigo, pero tengo una duda.. aunque baje los archivos necesarios y los copie en la carpeta donde tengo el documento del calendario, al ejecutar el calendario en el navegador y darle click al boton (...) no me sale el calendario para elegir la fecha!!ayuda que puede ser? el documento del calendario esta exactamente igual como lo explicas.
Responder
Facebook Mundonets Twitter Mundonets Google Plus Mundonets