Utilizar el calendario para seleccionar una fecha

  • Por
Cómo utilizar el calendario en un campo de formulario donde deseamos que se introduzca una fecha.
Vamos a ver cómo podemos utilizar la librería del calendario PHP para seleccionar una fecha en un elemento de formulario, que sería una de las acciones más típicas a realizar con la librería del calendario vista anteriormente.

Referencia: Se encontrará información del calendario y la introducción necesaria para seguir este artículo en el manual Calendario en PHP.

Lo que pretendemos conseguir es disponer de un campo de texto donde se debería introducir una fecha y la opción de pulsar un botón para abrir una ventana independiente con el calendario. En el calendario deberíamos poder pulsar un día concreto y la fecha debería escribirse en el formulario de origen.

El ejercicio se puede ver pulsando este enlace.

Para completar este ejercicio se deben realizar una gran cantidad de pasos, ninguno de ellos demasiado complicado o largo, técnicamente hablando, pero sí bastante específicos. Realmente el bloque principal del trabajo ya está realizado con las librerías del calendario relatadas en este manual, pero aun queda una adaptación bastante laboriosa.

Hemos puesto a vuestra disposición para descargar los scripts y librerías utilizados en este ejercicio.

El formulario

Para empezar vamos a ver cómo sería el formulario donde se seleccionaría una fecha ayudado por el calendario.

<form name="fcalen">
Fecha:
    <INPUT name="fecha1" size="10">
    <input type=button value="Seleccionar fecha" onclick="muestraCalendario('','fcalen','fecha1')">
</form>


El campo de texto debe colocarse dentro de un formulario. Debemos nombrar tanto el formulario como el campo de texto para luego poder acceder a ellos a partir de la ventana del calendario utilizando Javascript.

Al lado del campo de texto colocaremos también un botón para abrir el la ventana del calendario. Por comodidad, el botón llamará a una función Javascript y esta será la encargada de abrir el calendario en una ventana secundaria.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Alex

16/12/2004
El articulo merece de verdad la pena.

Salu2

madrizpm

08/4/2009
Descarga
no me deja descargarlo Que pasa?

miquel_perez

09/4/2009
Descarga erronea
El link de la descarga no funciona, es imposible realizar la descarga de los scripts.

SAMUEL

30/9/2009
UNACONSULTA
GRACIAS POR EL ALCANCE...PERO DIME COMO HAGO PARA INSERTAR ESA FECHA QUE SELECCIONE EN UNA BASE DE DATOS EN MYSQL...HE TRATADO MUCHAS VECES, PERO NO ENCUENTRO EN NOMBRE DEL TEXTBOX...GRACIAS

PEPE MTZ

15/10/2009
FELICITACIONES
ME PARECE MUY BIEN Y BUENO EL SCRIPT.

Champolion

30/11/2009
El Scrip si funciona
El Script de Calendario si funcion y tambien el link para descargarlo. Solo que deben loguearse primero para que funcione el link de la descarga. Te baja una carpeta comprimida en ZIP y ahi estan todos los archivos y si funciona bien, Yo ya lo probe en mi propio Web Site.

Khuzar

12/5/2010
Excelente...
Excelente script me ayudo mucho, gracias por el dato ;)

milton valencia

27/9/2010
duda con el codigo calendario.
no me quiere ejecutar el codigo del archivo calendario.php. Pareciera que tuviera errores no lo se.

hardsome

10/11/2010
gracias
muchas gracias por la info en verdad que para mucha gente es de gran importancia q exista este blog

:)

midesweb

19/11/2010
Sobre la descarga del código del calendario
Hola a todos!
La descarga la hemos actualizado a día 19/11/2010. Está comprobada, por lo que os aseguro que funciona.
Como dice una persona, hace falta loguearse con vuestro usuario de DesarrolloWeb.com para poder descargar el archivo.
Saludos!

safirolds

20/2/2011
colocar fecha en un formulario
hola... bno descargue el archivo zip y coloque el codigo
<input type=button value="Seleccionar fecha" onclick="muestraCalendario('','fcalen','fecha1')">
dentro de mi formulario, pero la verdad no se como utilizar esos archivos que se descargaron ni en donde se colocan.
le agradeceria una ayuda.

alejsel

11/3/2011
Basate en el archivo index
Al descargar el archivo, entra a la carpeta "calendario-seleccion-fecha" abre el archivo index, y basate en ese para incluir los mismos scripts y codigo a tu pagina. y ya solo haces las modificaciones necesarias, es mas facil asi.

chiky

24/6/2011
duda paquete calendario
En el la versión codigos-calendario-php
para seleccionar las fechas. Se puede elegir hasta el año 2013, ¿Cómo puedo hacer para aumentar la fecha de elección?

Un saludo

Vicko

27/6/2011
Utilizar fecha para consultas MySQL
Hola, muy interesante y funciona muy bien, pero queria saber como puedo utilizar esos valores que se escriben en la caja de texto al momento de seleccionar la fecha, es decir quisiera utilizar ese calendario por ejemplo para insertar un nuevo registro en una tabla de mysql o para realizar una consulta que me muestre un registro de las operaciones realizadas dentro del rango de fechas que escojo, es decir, como utilizar esas fechas obtenidas del calendario

ajbb

24/8/2011
ayuda con listbox
Hola, como puedo hacer para que desde un listbox pueda mostrar el calendario para elegir la fecha

geodeth

10/9/2011
no funciona el link
ni modo

Enrick88

17/9/2011
como guardo la fecha en una bd d mysql
como guardo la fecha en una bd d mysql???

Eliza diaz

17/10/2011
Ayuda
hola me gustaria me apoyen respecto a la fecha que yo selecciono la envie a un campo de una base de datos espero me den respuesta. GRACIAS

vicky

13/8/2012
no me sale :(
hola qu tal! primero q nada kiero agradecert por el post q subiste, muy bueno y de muuuucha ayuda, ahora yo tengo un problema lo agrego a mi pagina web donde tengo un formulario, al presionar el boton "seleccionar fecha" aparece el calendario, pero ahora a la hora de clickear una fecha, ésta no se guarda en el otro recuadro nose como hacer para que lo lea y lo guarde, yo utilizo dos archivos, una donde se crea el formulario con html, y el otro donde lo proceso llamado process.php, eso es todo graciaassssssss

pavilo

20/8/2013
no hay scripts para descargar
hola amigos,

les escribo para notificarles que no he podido efectuar la descarga de los scripts. etc

les agradezco me puedan ayudar

gracias

francisco_m_l

08/4/2014
Gracias.
Funciona solo que hay que agregarle al formulario el valor de method y el de action, mas los botones de submit y reset. ya lo estoy usando en mi web.

kapry

14/5/2014
No se puede descragar
al hacer clic en descargar ya, no funciona

morish

18/8/2014
Calendario.. Dudas!!!
El articulo es excelente!! Lo explica muy bien. Yo que no soy muy ducha en esto de las paginas web realmente necesito ayuda.
Estoy construyendo mi propia pagina web, he elegido wix que las da gratis y quisiera añadirle un calendario para elegir fechas de llegada y salida (especie de una agencia de viajes pero muy básica) Por favor pudieras ayudarme y explicarme si es posible hacerlo.
Llevo dias en esto y se me está derritiendo el cerebro!!!
Un saludo y gracias
T.

Wilfredo Augusto Gonzalez

24/10/2014
Codigo
Che hermano todo es spam que le paso a la pagina?