Elegir una fecha en un formulario con un calendario y jQuery
En ocasiones necesitamos crear un formulario donde alguno de los campos requieren la selección de una fecha por parte del usuario, por ejemplo para la reserva de la habitación de un hotel, la compra de un billete de tren, etc..
La mejor manera de solicitar una fecha al usuario es a través de un calendario que se despliegue a la hora de introducir la fecha. Es lo que vamos a hacer en este ejemplo.
Para ello vamos a utilizar el plugin jQuery UI Datepicker.
Lo que vamos a conseguir es esto:
Para utilizarlo necesitamos:
1) jQuery, por supuesto:
1 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> |
2) jQuery UI:
1 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> |
3) En cuanto a estilos, utilizaremos el jQuery UI CSS Framework (esta línea debería ir antes de las dos anteriores en nuestro código):
1 | <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.7.2.custom.css" /> |
Y sus iconos:
Si seguimos las instrucciones del plugin, vemos que utilizar el calendario para seleccionar una fecha es realmente sencillo. Sólo hay que escribir, en su forma más básica:
1 2 3 4 5 | <script type="text/javascript"> $(document).ready(function() { $("#datepicker").datepicker(); }); </script> |
Siendo en este caso “#datapicker” el id del input del formulario al que aplicamos el calendario:
1 | <input type="text" name="datepicker" id="datepicker" readonly="readonly" size="12" /> |
Como veréis le hemos añadido el atributo readonly para que no pueda ser modificado el contenido del input por el usuario, es decir, que se quede la fecha elegida sin poder alterarla manualmente. Aunque algunos autores lo incluyen, es probable que sea mejor no incluirlo, ya que si Javascript está desactivado no podríamos escribir nada en el input.
Si unís todo el código anterior veréis que el calendario sale en inglés. Para ponerlo en Castellano (también se puede poner en Catalán o en Euskera) tenemos los archivos de localización.
En concreto, para que esté en Castellano:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | jQuery(function($){ $.datepicker.regional['es'] = { closeText: 'Cerrar', prevText: '<Ant', nextText: 'Sig>', currentText: 'Hoy', monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio', 'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'], monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun', 'Jul','Ago','Sep','Oct','Nov','Dic'], dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'], dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'], dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'], weekHeader: 'Sm', dateFormat: 'dd/mm/yy', firstDay: 1, isRTL: false, showMonthAfterYear: false, yearSuffix: ''}; $.datepicker.setDefaults($.datepicker.regional['es']); }); |
Vamos a unir ya todo el código antes de ver posibles modificaciones. Podéis ver este código funcionando en esta demostración y podéis bajar el código aquí.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <!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" lang="es" xml:lang="es">
<head>
<title>Emenia Demo - Uso de jQuery Data Picker</title>
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.7.2.custom.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$.datepicker.regional['es'] = {
closeText: 'Cerrar',
prevText: '<Ant',
nextText: 'Sig>',
currentText: 'Hoy',
monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio',
'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun',
'Jul','Ago','Sep','Oct','Nov','Dic'],
dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
weekHeader: 'Sm',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['es']);
});
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<h1>Uso de jQuery Data Picker</h1>
<form action="">
<label> Seleccionar Fecha:</label>
<input type="text" name="datepicker" id="datepicker" readonly="readonly" size="12" />
</form>
</body>
</html> |
Ahora vamos a ver algunas formas de personalizar el calendario. Muchas de las opciones las hemos utilizado ya en el código de localización. La lista completa está en http://docs.jquery.com/UI/Datepicker
- altField y altFormat nos permiten guardar la fecha elegida en otro campo con un formato diferente, por ejemplo si lo queremos mostrar al usuario con un formato pero que nos llegue a nosotros con otro diferente.
- appendText, si queremos que se muestre un texto al lado del input, para una mejor comprensión para el usuario:
1 2 3 | $(document).ready(function() { $("#datepicker").datepicker({ appendText: ' Haga click para introducir una fecha' }); }); |
-autoSize, si lo ponemos en true se ajustará el input para dar cabida a la fecha introducida.
- numberOfMonths, para elegir el número de meses que van a salir. Si ponemos numberOfMonths:2, por ejemplo, saldrán dos meses. Esto lo aconsejan algunos expertos en usabilidad ya que hay más opción donde elegir de un solo vistazo. Veamos un ejemplo de numberOfMonths , donde se añade al anterior de appendText para ver cómo se unen dos opciones.
- Si queremos que el calendario se despliegue no al hacer click sobre el input sino sobre un botón adjunto (por ejemplo, una imagen de un calendario pequeño, como tienen muchas webs que habréis visto), utilizaremos las opciones buttonImage, buttonImageOnly y showOn:
1 2 3 4 5 | $("#datepicker").datepicker({ showOn: 'button', buttonImageOnly: true, buttonImage: 'images/datepicker.png' }); |
donde datapicker.png es un icono de un calendario. Al hacer click sobre él, se despliega el calendario. Veamos un ejemplo.
- dateformat, para cambiar el formato en el que se pega la fecha al input. En la demo está en dateformat: ‘dd/mm/yy’. Otra opción es por ejemplo ‘DD, MM, d, yy’ . Lista completa de formatos de fecha.
- maxDate y minDate, para poner una fecha máxima y otra mínima (supongamos que queremos que sólo salgan los meses de Junio a Octubre):
1 2 3 4 5 6 7 8 | $(document).ready(function() { $("#datepicker").datepicker({ minDate: new Date(2010, 5, 1), maxDate: new Date(2010, 9, 30), dateFormat: 'dd/mm/yy', constrainInput: true, }); }); |
Veamos un ejemplo de maxDate y minDate.
- buttonText, Si queremos que se abra el calendario al hacer click sobre un botón al que le ponemos nosotros el texto:
1 2 3 4 5 | $(document).ready(function(){ $("#datepicker").datepicker({ showOn: 'button', buttonText: "Seleccionar" }); }); |
Veamos una demo del uso de buttonText.
- showAnim, si queremos cambiar el efecto con el que se muestra el calendario
1 2 3 4 5 | $(document).ready(function(){ $("#datepicker").datepicker({ showAnim: 'fadeIn' }); }); |
Veamos una demo del uso de showAnim. Podemos usar como efecto ‘show’ (por defecto), ‘slideDown’, ‘fadeIn’, o cualquiera de los efectos para mostrar/ocultar de jQuery UI.
- changeMonth permite mostrar una lista desplegable de meses para poder ir con mayor rapidez al mes deseado:
1 2 3 4 5 | $(document).ready(function(){ $("#datepicker").datepicker({ changeMonth: true }); }); |
Veamos una demo del uso de changeMonth
Id probando todas las opciones de la página del plugin para ver las distintas opciones.
Por último, destacar una variación aportada por David Walsh en su artículo jQuery UI DatePicker: Disable Specified Days, para desactivar días concretos (por ejemplo, días que hayan sido ya reservados de un hotel y por lo tanto no puedan ser ya escogidos). También en su ejemplo se ve como desactivar los fines de semana y días de fiesta.
Sigue a Juan en Twitter, en Google+, o suscríbete al RSS Feed de Emenia para estar al día de nuestros artículos.
Artículos relacionados
84 Comentarios a Elegir una fecha en un formulario con un calendario y jQuery
Deja un comentario
Últimos artículos
Suscribirse a las entradas
Suscribirse a nuestro boletín
Muchas gracias por el calendario era justo lo que necesitaba…
Ammm ya tengo un calendario muy parecido a este
el problema es que quiero quitarle los fines de semana
pero la verdad no tengo ni la mas minima idea…
y estoy muy verde en esto de la programacion
auxilio!!!!!!
Buenas ! me ha encantado esta informacion ! la he utilizado en mi proyecto pero tengo una duda! tengo 2 input y el calendario solo me sale en uno de ellos , como podria hacerlo para que me lo aplicara a los 2 imput ? he cambiado el id y nada .. :S Gracias !
hola ke tal kisiera saber si tienes un datepicker con funcion live es decir poner varios datepicker (id) con una sola funcion y no una funcion para cada uno
Hola pake. Si, puedes hacerlo poniendo la misma clase para los inputs donde quieras que se aplique y en vez de #datapicker poner .nombredelaclase
Hola como pude un cliente mandar desde mi web las fecha a mi correo si no hay boton de envio
Muchas gracias. Llevaba dias buscando esta información.Dios!
Excelente información, muchas gracias por el aporte, me fue de gran ayuda para adaptarlo a un proyecto personal… Saludos…
Gracias! la explicación esta perfecta! solo he tenido un problema.
No he podido quitarle la animación show() que tiene al abrir y cerrar el calendario…
Alguien me podría ayudar??
Muchas gracias por la info, ya tengo el calendario funcionando.
Sin embargo he probado lo de deshabilitar dias concretos y no me funciona.
Es más, no me va ni el ejemplo de la web q dices de David Walsh en su artículo jQuery UI DatePicker: Disable Specified Days, para desactivar días concretos
Alguien lo ha probado?
Un saludo y gracias
Pingback: Navegando ando… 1 Octubre | soy un zote
Genialllllllllll sos un genio me solucionaste la vida… estaba buscando hace años esta info
Gracias de Verdad
Gracias Facu ))
Hola, quiero usar este metodo para un formulario de reserva de hotel… el problema es q cuando pongo el Indicador de Fecha de Enrada y se abre el calendario, cuando en la otra celda quiero poner el calendario de salida no me funciona… es decir solo se abre el de entreda… podrían ayudarme??? Estaría muy agradecido ! este es el codigo, no donde se pone o como poner para q se abra el calendsario de salida, es decir tiene uno de entrada y otro de salida… Gracias !:
Untitled Document
Nombre y
Apellido
Teléfono
Email de
Contacto
País y Región
o Ciudad
Entrada
Salida
Adultos
Niños
jQuery(function($){
$.datepicker.regional['es'] = {
closeText: ‘Cerrar’,
prevText: ‘<Ant’,
nextText: ‘Sig>’,
currentText: ‘Hoy’,
monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio',
'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun',
'Jul','Ago','Sep','Oct','Nov','Dic'],
dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
weekHeader: ‘Sm’,
dateFormat: ‘dd/mm/yy’,
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ”};
$.datepicker.setDefaults($.datepicker.regional['es']);
});
$(document).ready(function() {
$(“#datepicker”).datepicker();
});
Fecha Entrada
>>
1
2
3
4
5
6
7
8
9
10
>>
1
2
3
4
5
6
7
8
9
10
Ninguno
Escriba su Consulta
Hola,
Ten en cuenta que para que funcione con dos inputs distintos supongamos que uno tiene un id=”llegada” y el otro un id=”salida”. Entonces tienes que inicializar datepicker para cada input. Por ejemplo:
Hola, necesitaria usar el datepicker en un formulario cargado dinamicamente, se podría?? por mas que lo intento no me sale…
Muchas gracias
Otra cosa, una vez seleccionado una fecha se puede quitar con el input en readonly??
Gracias
Ya encontre la forma de usar el datepicker en un formulario cargado dinámicamente:
$(‘#datepicker’).live(‘focusin’,function(e){
e.preventDefault();
$(“#datepicker”).datepicker();
});
A ver si sabeis como borrar una fecha si el input esta en readonly. Es que quiero dejarlo en readonly porque no quiero que se pueda poner la fecha a mano ya que se puede poner mal la fecha…
Gracias
Pingback: Der3des – Blog de Juanla » Añadir un calendario a tus formularios
Pingback: Añadir un calendario a tus formularios con jQuery y Datepicker
Hola Bárbara , yo tengo inputs con la clase .fecha que se crean dinámicamente con Jquery dándale a Añadir campo, pero no me funciona lo que comentas:
$(‘.fecha’).live(‘focusin’,function(e){
e.preventDefault();
$(“.fecha”).datepicker();
});
Además , ¿eso tendría que ponerlo en $(document).ready(function() o a continuación de la función que crea el nuevo campo.?
Mil gracias
Hola yo necesito ponerlo en un formulario que al armarse dinamicamente puede poner mas de una campo de fecha, de uno a 5 alguien puede ayudarme?
se le podria mandar el Id del campo a la funsion?
saludos
ya me repondi solito jajaja
$(document).ready(function() {
$(“.CF”).datepicker();
y
jaja saludos
Pingback: Admin1234 » Blog Archive » Añadir un calendario a tus formularios con jQuery y Datepicker
Mi calendario muestra por default la fecha del dia ejemplo: 19/FEB/2011, he utilizado minDate: new Date(2011, 1, 19) y asi puedo restringir que el usuario no pueda elegir una fecha anterior al dia de hoy, pero que pasa si un usuario entra el dia 25 de febrero del 2011 y elige como fecha para que se le entregue un pedido el dia 23/FEB/2011, es obvio que esa fecha ya paso. La cuestion es que no quiero tener que especificar cada dua la fecha minima en el codigo de mi pagina. Entonces como hacemos para que el usuario no pueda elegir una fecha anterior al dia de hoy?
Perdon, no habia leido todos los comentarios, ya lo habian resuelto Juan Diaz-Bustamante
$(document).ready(function () {
// obtenemos la fecha actual
var date = new Date();
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
// inicializamos datapicker para cada input en este caso con la fecha activa a partir del dia de hoy y con el formato de fecha dd/mm/yy
$(“#entrada”).datepicker({ minDate: new Date(y, m, d), dateFormat: ‘dd/mm/yy’ });
$(“#salida”).datepicker({ minDate: new Date(y, m, d), dateFormat: ‘dd/mm/yy’ });
});
Bien. ya se como puedo deshabilitar fechas de los dias anteriores al dia de hoy. Pero que pasa si lo que quiero es deshabilitar los dias anteriores a los de una fecha específica que tambien ha sido introducida en otro input anterior. No se si me dejo entender. lo que pasa es que hago una pagina en la cual primero se ingresa en un input una fecha y en el otro debo ingresar otra fecha cualqueira pero que sea mayora a la primera fecha ingresada. Espero puedan ayudarme. Garcias
En el comentario anterior ya esta resuelto como restringir que el usuario no pueda elegir una fecha anterior al dia de hoy, la pregunta de ahora es siguiendo esa mia linea de ejemplo que el usuario no pueda elegir una fecha al dia de hoy, Pregunta: Como puedo hacer para que los dias Miercoles, Sabado y Domingos no puedan ser elegidos ni como fecha de entrada ni como fecha de salida?
Hola Carlos,
Prueba con beforeShowDay. Por ejemplo, para deshabilitar Miércoles, Sábados y Domingos:
Para deshabilitar sólo los fines de semana tienes noWeekends. Siguiendo con el mismo ejemplo:
¡Muchas gracias por éste sitio y por asesorar a los que no tenemos tanta experiencia en programación!
Me ha sido de mucha utilidad éste plugin y la opción de deshabilitar fines de semana.
Gracias por todo y a todos los que aportan.
Necesito ayuda. ya se como puedo deshabilitar fechas de los dias anteriores al dia de hoy. Pero que pasa si lo que quiero es deshabilitar los dias anteriores a los de una fecha específica que tambien ha sido introducida en otro input anterior. No se si me dejo entender. lo que pasa es que hago una pagina en la cual primero se ingresa en un input una fecha y en el otro debo ingresar otra fecha cualqueira pero que sea mayor a a la primera fecha ingresada. Espero su ayuda. Garcias
necesito ayuda quiero implemetar un calendario q este siempre visible, y q al seleccionar una fecha del mismo me muestre en un label, ayudenme porfa
Hola Reyeryck,
Creo que lo que buscas está en este artículo, en el apartado “Always Visible Datepicker Calendar”.
muchas Gracias por este tipo de ayuda de antemano agradecido de todo corazón, Dios te bendiga y hechale muchas ganas por que no muchos se prestan para hacer este tipo de trabajo y darlos a las personas que quizá un día lo ocupen.
Hola a todos gracias por esa valiosa explicación pero quisiera pedir auxilio
ya tengo el calendario pero no se como resaltar los dias en que se ha creado una fecha desde la base de datos agradeceria mucho cualquier ayuda
gracias
Hola Carolina,
Mira a ver si te vale la solución que viene en este artículo: jQuery UI: Highlight multiple dates in jQuery datepicker
Hola, antes de nada felicitaros por el tutorial que estais montando entre todos. Bueno, mi problema es que hoy día 28 de febrero dá error el calendario si le pones como fecha mínima hoy y por ejemplo máxima dentro de 5 días.
La fecha mínima que pone es el 28 de marzo.
Gracias
Buenas tardes, ante todo decir que es maravilloso poder contar con estas explicaciones tan elaboradas y tan bien explicadas. Pues bien, necesito un poco de ayuda y es que si pongo el link del css no me lo coje y ademas provoca que no me salga el calendario.
¿Alguna sugerencia? Muchas gracias.
Gracias Jesús,
¿Te refieres al enlace a tu hoja de estilos? ¿Cómo lo tienes puesto?
Muchas gracias por la rapidez en contestar. Al final lo he resuelto, aunque supongo que no me cogia el css debido a que me habia bajado una version posterior. Poniendo el css jquery-ui-1.7.2.custom.css que me he bajado ya me va perfectamente, la que tenia creo que era la 8.2 y no me ponia los estilos.
Buenas tardes agradezco haber compartido este material entiendo que a mas de uno le fue de mucha utilidad, preciso me comenten si alguien pudo correr esta utilidad para que guarde en una variable el valor ingresado al datapicker y posteriormente valide en una BD si el valor ingresado esta disponible.
Muchas gracias de antemano por lo todo lo brindado en este espacio.
Saludos.
hola que tal yo tenia aplicado este calendario a uno de los formularios pero cambie el estilo del formulario con javascript y ya no me jala el calendario que podria ser ????}
Hola David,
No sale bien el código que pegaste.
Hola buen Tutorial del calendario, muy buena explicacion
Ya modifique algo el calendario que se muestra pero, solo tengo una duda como hago para que el usuario pueda seleccionar el formato de la fecha, es decir si el usuario elige 24/06/2011 como hacer para que el decida elegir si separar la fecha por “guion” , ” punto” , “diagonal” o “junta” (ej: 24-06-2011, 24.06.2011, 24062011, etc)
Espero me puedan ayudar gracias
salu2
Buenas Tardes acabo de implementar el calendario lo integre con php para validar los rangos de fechas funciona bien lo del rango peor me pasa un detalle en IE no me carga el calendario por lo menos en el IE7 y IE8 no carga hayq habilitar la compatibilidad eso porque yo lo se pero personas normalitas no van a saber que debo ajustar ?
Parte del codigo
En el texto anterior copie mal
en las lineas del filtro
va es min
Date: new Date(2011, 6, 08),
maxDate: new Date(2011, 6, 10),
Hola, tengo una consulta que no logro dilucidar,.
El plugin funciona perfecto,. pero por algún motivo sale más grande, al tamaño me refiero, que en el ejemplo,.
Para chequear subi el ejemplo de la página a mi servidor y se ve bien,. No entinedo cual es el error,..
Saludos
Fernando,….
Me auto respondo,,. buscando encontre como hacerlo,.
En el CSS cambio esta línea:
Originalmente el font-size esta en 1.1em
Saludos
Fernando,….
Gracias!!!
Una consulta ¿Cómo hago para deshabilitar los días pasados? O sea, que me permita seleccionar desde el hoy en adelante.
Saludos
Fernando,..
Excelente el ejemplo, pero ¿como puedo modificar el ejemplo, para agregar mas de 1 calendario en mi sitio? , no me resulta
Gracias
Una consulta como puedo bloquear dias especificos para que no se puedan seleccionar
una pregunta quiero marcar dias especificos en el el calendario como le podria hacer alguna idea
lo que hago es una agenda y estoy usando mysql y php para lo de la base de datos y conexiones
lo que quiero hacer es que si a mi me marca automaticamente el dia 30 de julio
tambien me marque otras fechas que tambie haya seleccionado anterorior mente como un dia ocupado por ejemplo con algun color que haga la diferencia entre los otros dias
primero felecitacion Juan Diaz por el tutorial, esta bien explicado lo puse a practica y m funciono; pero tengo una preguna??????????, es cuando pongo otro libreria como este:
para hacer algunas funciones no me lo ejecuta este escript; pero si el calendario: ¿cual es el problema? que este script q te pongo no soprta a al calendario o como es??? gracias por tu respuesta……………………….
Buenas taredes.
Mi consulta es:
como puedo pasar los inputs de 2 fechas a una BD en Oracle.
Gracias Juan, excelente tuto %` ]
Yo queria realizar un filtro para una consulta SQL y encontre este sitio, esta muy bueno el estilo que crearon, ahora cuando quise realizar o más bien aplicar el efecto fecha a mas de un imput no lo lograba, lei los post anteriores, pero lo solucione cambiando
la ‘#efecto’ por una de class ‘.efecto’ y a los imput le di la clases class=”efecto”.
Ejemplo:
————
Fecha Inicio:
Nombre
fecha:
——-
saludos
Hola Maximiliano,
Yo creo que ha salido mal el código. Mira debajo del área de texto qué etiquetas HTML poner antes y despues del código para que se vea bien. Gracias.
Verdaderamente gracias por la ayuda, ya lo habia visto en ingles y me costo mucho entenderlo, pero gracias a ustedes fue mas facil y sobre todo me di cuenta de algunos comandos que no habia entendido…!! gracias…!!
Gracias Samuel por tus comentarios. Me alegro que el artículo haya sido de utilidad.
Hola que ta todos… la verdad no he podido mostrar calendario en varios input cargados dinamicamente, agradeceria si alguien me ayudara he intentado de todo, ya he leido sus comentario pero aun no puedo…seria mucho pedir alguien me pasara como hacerlo
Si no es mucho pedir guillermo yo quiero hacer lo mismo que tu. podrias decirme que codigo usaste para agregar el input que con el que tengo no me a leido los calendarios
Sólo quiero dar las gracias al creador o creadores de esta página tan bien trabajada y estructurada. Y otro gracias por responder a todos los que exponen sus dudas, hecho que no es muy común por desgracia.
No me canso de repetirlo, un gran trabajo, enhorabuena.
JSA
Gracias Joaquín!
Aunque he de reconocer que no contesto tanto como debería, sobre todo ultimamente, pero es que estoy a tope y no encuentro tiempo para hacerlo!
Gracias por todos los aportes. Ya tengo trabajando el calendario, pero quisiera agregarle la funcionalidad siguiente, a ver si es posible con jquery:
Tengo 2 input text, uno de fecha inicial y otro de fecha final, deseo que cuando el usuario seleccione la fecha inicial, sea cual sea el día, en el input text se ponga automaticamente la fecha inicial del mes, y caso contrario con la fecha final, donde deseo lo opuesto, que sea cual sea la fecha elegida, se pogan el último día del mes elegido.
Se puede hacer eso desde jquery y este calendario.
Gracias por el tutorial, está muy bueno, espero me puedan responder.
Saludos.
Hola, excelente estoy muy contento con tu aporte !! solo quiero hacerte una consulta, aplique el script a mi formulario pero para indicar fecha de nacimiento, no se como hacer para que buscar una fecha por año sea mas facil, osea, sale 12 oct 2011 me tardo mucho y tengo que hacer muchos clicks en atras para llegar a 4 jun 1995
sera que se puede? no se como agregar otro boton para pasar año, muchas gracias ! 
TEngo el mismo problema, alguien nos podria ayudar
Hola maestro, gracias por el aporte, ya ves que pasan los meses y aún seguimos descubriéndolo!
(
)
Mi duda es bassstante elemental pero no soy de código, cuando veo cosas que no he visto antes me bloqueo! :/
En fin, he implementado sin problemas el datepicker, selecciono fecha, lo personalizo, hasta aquí perfecto.
ME falta lo más importante (que impotencia!!!) cómo rescato el valor de la fecha escogida para enviarlo en el formulario? He probado varias cosas pero ninguna funciona y no puedo creer que lo más elemental me cueste. como trato esa variable para enviarla junto con el resto de las vars del form??? Seguro la respuesta es muy simple, pero soy incapaz de encontrarla
Grazie!!!
Hice todo y me sale, el calendario, pero sin los iconos, he puesto algo mal?
o donde descargo los iconos?
Hola, buen calendario.
Como podria hacerle para poder añadir una lista desplegable de años
Excelente tutorial, y explicación me sirvió mucho para mi proyecto gracias !!
como le hago para que al momento de poner el año me saque un rango por ejemplo de 01/01/1950 a 31/12/2015
Muchas gracias!
Genial tutorial y de gran utilidad!
Facilidad de uso y de entendimiento!
Gracias de nuevo!
Pregunta
quiero poner como rango de fecha lo siguiente:
sin embargo solo me maneja hasta el año 2011 que modifico e intentado con menores a 2001 y si funciona
muy chvr el calendario
Hola, no soy muy experto pero he colocado el calendario en mi apliación y funciona perfectamente, gracias a todos.
Mi problema llega una vez que tengo la fecha ¿cómo puedo utilizarla dentro de mi código? Es decir, he elegido esa fecha para algo pero no sé cómo puedo rescatarla. Sé que puede ser una duda básica pero no soy capaz.
Gracias de antemano.
¡Hola!
Yo no tengo ni idea de programación pero la verdad es que siguiendo los pasos he conseguido insertar el calendario sin problema. Mi duda es la siguiente, ¿cómo puedo hacer para marcar una fecha del calendario y que lleve a un evento o acontecimiento determinado?
Por ejemplo, quiero que el día 12 de diciembre quede marcado y el usuario al clickar en él vea que está marcado porque ese día hay una actuación en algún sitio.
Espero haberme explicado bien, gracias
si quieres sientate a esperar compadre aver como se resuelve solo ya que si no sabes programacion eso es parte de, y la verdad esta canijo que alguien les resuelva la vida de esta forma entonces lo que os recomiendo es que aprendan programacion o que contraten a un programador
chaosito….
Genial !!!
Muchas Gracias por tu Trabajo Juan, he seguido tu tutorial y funciona 100%
Un Saludo desde Barcelona
excelente tutorial.
tengo una duda, tengo un form con dos fechas, una de inicio y una de finalizacion, como hago para q la segunda fecha siempre sea mayor q la primero y no me deje seleccionar otra menor a la primera.
gracias
hola
quisiera utilizar este calendario para incluir la fecha de nacimiento, pero no encuentro la manera de listar los años, quisiera saber si alguien me puede ayudar….
Muchas gracias por este Calendario, me fue de gran utilidad, tambien me gustaria saber como listar los años como tambien pregunta adri, sin embargo, ya con esto es mas que suficiente, gracias otra vez!
Muchas gracias por compartir ese ejemplo tan bueno y util, a mi en lo particular me fue de gran ayuda. Gracias por compartir.
hola oye, como puedo cambiar la apariencia del datepicker sin tener que modificar el css ??