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.
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:
muchas gracias!! excelente ayuda..
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
Barbara, hola se que este post tiene mas de 2 años pero buscando me encuentro en la misma situacion que estuviste tu, necesito implementar el datapicker desde datos dinamicos, hasta ahora me los muestra pero solo en el primer campo dinamico, si puedes ayudarme, estare muy agradecido, Saludos
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
Hola, aun despues de 2 años del post, me puedes ayudar?
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
Agreguen la propiedad
changeYear: true,
Y resuelto el problema
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 ??
Buenas, primero que todo muy buen aporte este, es de mucha ayuda.
Para mi sitio web ya tengo implementado el datepicker, pero tengo el siguiente inconveniente, el usuario selecciona la fecha pero de acuerdo a la fecha seleccionada debo realizar unas consultas en mi base de datos en mysql, cómo hago para parar el valor de esa fecha que está en javascript a la páina php en la que está el datepicker???
He intentado con el evento onSelect y sé que dateText es el que me almacena el valor de la fecha pero no logro retornarlo como value para un input hidden que se supone recibirá el valor.
¿Es posible hacerlo de esta forma o existe un método propio o pero aún no se puede hacer esto?
Muchas gracias
Excelente!!! Gracias!
buenas tardes…amigo como implemento varios el datepicker en varios campos de un formulario tengo 5….
Gracias! por colocar este articulo, es justamente lo que andaba buscando…
en las respuestas que das tan amablemente, Juan Diaz a alguien le diste este enlace..
y ahi el usuario puede hacer click en el campo del input e introducir fecha “manualmente”, eso, como se puede evitar ??
T eagradezco muchisimo tus resPuestas Juan.
Hola Lucero, puedes añadir en el input el atributo readonly=”readonly”
Juan! se que estoy molestando mucho tu tiempoo…
deseo una enseñanza maestro, como se puede hacer para modificar el año limite, me interesa tenerlo desde 1994 y no he encontrado una forma de como hacerlo, imagino que en las apis de google esta eso, pero esa es mi imaginacion.. que puedes decirme al respecto ?
Agradecida
Lucero
Muchas Gracias! tras mucho buscar tu ayuda me ha venido perfecta!!
Buenas noches.
Excelente calendario pero quisiera saber si es posible colocar una forma algo donde podamos escoger un año luego el mes y por ultimo el día de de un forma mas rápida ya que los botones de retroceso serian algo traumatico para alguien que hubiera nacido en 1980 jejeje. Seria algo asi como changeMonth: true pero seria changeYear: true. Es mi presunta. Seria bueno saber como realizar para modificar.
Gracias
te felicito me sirvio de mucho
hola tengo el sig codigo quisiera saber como enlazar con un boton de envio que me muestre en una tabla los registros(de mi bd(mysql)) que se encuentren entre el rango de fechas que introduje en los campos(fecha_inicio,fecha_final) GRACIAS POR SUS RESPUESTAS
Seleccionar Fecha de inicio:
Seleccionar Fecha final :
hola, me sale el calendario en ingles como lo pongo en español???
buenos dias, utilice el calendario en una pagina en php y me funciono todo bien, pero tiene un detalle, el me carga sin la parte de los baner, es decir, se ve sin ninguna estetica. estoy haciendo un proyecto y pues no puedo dejar esa parte de manera visual tan fea. para saber si hay que cargar algo en especial?. gracias de antemano por responder
Gracias por la aportación!
Gracias ))
Hola Juan excelente tuto… me ha ayudado mucho en mi proyecto… tengo ahora un problema qusiera que me ayudaras… resulta que tengo una pagina generada de una consulta de php y mysql que es una lista de chequeo, en esa lista tengo una fecha que esta programada para realizar una actividad y un campo en el cual colocan la fecha real de realizacion de la actividad, pero esta no puede superar una semana luego de la programada, es decir si se programo para el dia 7 de enero el calendario debe mostrar la semana correspondiente para el 1 al 7 de enero y las demas fechas estar bloqueadas. ya tengo el calendario de este tuto en en campo fecha para cargar la fecha real de realizacion de la actividad y bloquea una semana hacia a tras pero apartir de la fecha actual. mi problema consiste en que la fecha de realizacion es una fecha extraida de la base de datos de mysql y varia en cada registro. no se como hacer para reemplazar la fecha actual por la fecha de la base de datos de mysql.
gracias por tu ayuda.
Hola realmente muchas gracias por su excelente aporte, hace mucho andaba queriendohacer algo asi, pero tengo un pequeño impace y es al momento de querer guardar en la base de datos por defecto creo un campo de fecha en phpmyadmin y al momento de guardar los datos de formulario me guarda como 0000/00/00 no se si me podria ayudar a solventar ese problema pero te antemano muchas gracias por compartir tan buenos aportes. exitos en sus labores diarias y muchas gracias
Prueba cuando declaras la variable de fecha darle la siguiente caracteristica
WOW WOW WOW esto esta sencillamente Espectacular, Muchísimas gracias Juan
Muchas gracias ))
Un pequeño aporte, para bloquear un dia de la semana en especifico, por ejemplo los domingos:
0=domingo, 1=lunes…
Luego hay que darle la propiedad en la declaracion de la fecha.
Hola Juan estoy creando una pagina web de alquiler de apartamentos y he pegado el código del calendario y me sale todo menos la imagen: es decir que el calenda rio me sale bien pero solo los numeros… no me sale la imagen del calendario.
Muchas gracias.
Por favor si alguien puede responderme, gracias
Hola Borja, Se puede ver tu web? Quizás no estén cargándose los estilos?
Todavía estoy haciéndola no esta colgada, pero cuando le doy para verlo en el navegador las imágenes del calendario no aparecen, pero aparte de eso funciona perfectamente.
Soy principiante en esto.
Te agradecería alguna ayuda, gracias.
Hola Borja,
Sabes si carga bien la hoja de estilos?
No me encuentra los css
Verifica la ruta que has puesto hasta tu archivo CSS.
He leído un comentario anterior que creo que le sucedía lo mismo no?
Me pone: no se ha encontrado “jquery-ui-1.7.2custom.css” Si el archivo no se encuentra en el servidor…..
Puedes intentar a cargarlo desde Google si prefieres
Muchas gracias por la ayuda, ahora se ve muy bien pero se ve enorme.
¿Se podría cambiar el tamaño?, gracias.
Buenas tardes, estoy usando este calendario en una aplicacion que estoy desarrollando, y me funciona excelente en chrome, IE pero en Firefox no, a alguien le pasa algo similar? aagradezco respuestas, ayer funcionaba bien y hoy no
Excelente calendario felicidades, mi pregunta es como puedo hacer para desplegar varios años a la vez? (asi como despliegas los meses), necesito desplegar desde el año actual y 60 años atras 2012,2011…..1952. GRACIAS..
muy bueno, me haz salvado la vida
hola, no me quiere cargar el archivo css que viene en el codigo de este ejemplo
Hola.
He instalado el código, pero no funciona.
Yo creo que me falta el archivo del calendario, además, como podría poner la fecha de entrada y salida en una sola línea.
Gracias.
Hola gracias realmente es muy útil el datepicker, pero como hago para validarlo y que sea un dato requerido?
gracias!
Hola amigo
Muy bueno el tutorial. ya lo he modificado el css y me gusto mucho, pero tengo un problema, resulta que cuando despliego mi año aparece de 2002 a 2012, mi pregunta es: donde debo modificar para que me aparezcan muchos mas años antes por ejemplo: desde 1930 hasta el año en vigencia.
Gracias
despues de 6 horas estar probando diferentes opciones y con mi poco conocimiento de programación, logre inserta el calendario propuesto para mi formulario y funciona muy bien. Muchas Gracias juan
mi problema es el siguiente realice un codigo en php para bloquear algunos dias trayendo desde la base de datos.
lo que quiero es deshabilitar el dia de hoy si vemos el calendario de arriba el dia de hoy viene siendo 18 lo cual al darselo no sucede o alguna forma de que el dia 18 no quede marcado con el cuadro que lo identifica
Muchas gracias por el aporte, todo me funciona a la perfección, solo tengo un problema con la parte estética. Cuando ejecuto el código en mi pagina el calendario se muestra sin ningún estilo, es decir, no tiene formato. A comparación de como se ve en tus ejemplos que si tiene color y una ordenación en los días, etc. Que me estará haciendo falta para darle formato estético a mi calendario…
tengo un error, utilizando datepicker, al almacenar en mysql;
los input de mi formulario:
EN LA FORMA DE COMO LO GRABO EN OTRO PROGRAMA (GRABA.PHP):
SALUDOS
Creo que me falto:
tengo un error, utilizando datepicker, al almacenar en mysql;
los input de mi formulario:
ayuda por favor…
SALUDOS
Quisiera saber si de algun modo se puede editar el codigo fuente para que sea mas facil coger un año como por ejemplo 1987. !!!!
De Ante Mano Muchas Gracias!!!
Muchas gracias por el esfuerzo que realizas. Muy aclaratoria la pagina. Saludos
gracias amigo dios te pague me pareció exelente
hey saben si esos cod se puede incluir en php es decir yo estaba utilizando un checkday para incluir las fechas mediante un formulario pero si usu este metodo como hago para que se guarden en la base de datos??
Disculpe esto tambien se puede hacer en php porque no me fucniona ??
Hola, yo lo estoy haciendo en un formulario que tengo en php sin problemas.
Hola Juan,
Excelente este calendario, la verdad está muy bien explicado, yo no soy un experto, entiendo un poco el tema y pude aplicarlo muy bien hasta ahora.
Estoy queriendo utilizar este calendario para consultas de disponibilidad en un hotel (sin conexión a base de datos, solo formulario por e-mail) y estoy utilizando el calendario 2 veces (ingreso y salida). Pude a restringi la fecha que se muestra en el calendario para que no se puedan elegir fechas pasadas tal como lo explicaron previamente, lo que necesitaría es que me digas si es posible es como restringir el segundo calendario en base a la elección del primero, es decir que si un huésped elige como fecha de ingreso el 5/01/2013 que la fecha de salida no pueda ser menor que el 6/01/2013, es posible con este calendario?
Desde ya muchas gracias por todo.
Saludos,
Copio como tengo el código hoy en día por ahí ayude.
Fecha de ingreso:
Fecha de salida:
el ejemplo del calendario me funsiona muy bien solo, pero cuando lo implement en un proyecto la fecha si me la toma bien, pero el boton siguiente para ir a la otra pagina me deja de funcionar, no se si no oodra ir dentro de otro form pues esta el form de ir a la siguiente poagina y este del calendario toene otro form, no se que podria estar pasando, me alguien me puede decir que pasa?
saludos
juan
hola tengo la misma duda que Ezequiel como puede hacer para que la fecha de salida no sea menor a la de la entrada??????porfavor si alguien puede ayudarme un poco en ello……
y para lo del valor de la fecha a elegir comiense desde la fecha actual yo lo use asi: $(“#desde”).datepicker({minDate:0});y me funciona muy bien……
gracias por el aporte y ojala puedas ayudarme
Hola.
Tengo el script de un pequeño y sencillo calendario que pasa “solito” los días los meses y los años, pero necesito que haga algo más aún. Necesito crear un vinculo idéntico para cada día, pero que solo esté disponible para clickear sobre él el día actual que está remarcado y ninguno más. Lo ideal, me parece, sería que el remarque (highlight) que cambia cada día para señalar el día actual, “arrastrara” consigo mismo el link (pues es el mismo para cada dia) ¿Es posible hacer eso?
Gracias adelantadas.
Ceroid.
Exelente post amigo. muy bien explicado y detallado. me sirvió de mucho, gracias
Saludos
Maximo W. Carrion Coronado
me ayudo mucho sin duda lo que buscaba, solo que no se por que a mi no me sale el mismo diseño que el ejemplo, pero aun asi me ayudo…
Muuuuuchas gracias, después de intentar y probar algunas veces pude hacer la implementación del calendario en mi proyect0
Este código vale para seleccionar la fecha del segundo calendario sea posterior a la del primero. Mucha gente parece que ha estado buscando este código