Función Javascript para abrir el calendario

  • Por
Dentro de las acciones encaminadas a seleccionar una fecha, debemos incluir una función Javascript que permita abrir un popup con el calendario.
El calendario, al pulsar uno de sus días, deberá escribir en el campo de texto origen la fecha seleccionada. Por tanto, para que el calendario sepa cuál es el campo de texto que debe actualizar, deberemos mandarle el nombre del formulario y del campo de texto donde colocar la fecha.

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

Para que el calendario conozca esos datos (nombre del formulario y el campo de texto) debemos mandarlos como parámetro a través de la URL. El calendario tendrá que memorizarlos hasta que finalmente se haya seleccionado la fecha.

Así pues, la función que abre el calendario y le pasa los datos del formulario y campo que actualizar tendrá una forma similar a la que se puede ver a continuación. Por cierto, la función estará escrita en Javascript ya que es el lenguaje con el que podemos abrir una ventana secundaria con el calendario como respuesta a la pulsación del botón.

var ventanaCalendario=false

function muestraCalendario(raiz,formulario_destino,campo_destino,mes_destino,ano_destino){
    //funcion para abrir una ventana con un calendario.
    //Se deben indicar los datos del formulario y campos que se desean editar con el calendario, es decir, los campos donde va la fecha.
    if (typeof ventanaCalendario.document == "object") {
       ventanaCalendario.close()
    }
    ventanaCalendario = window.open("calendario/index.php?formulario=" + formulario_destino + "&nomcampo=" + campo_destino,"calendario", "width=300,height=300, left=100,top=100, scrollbars=no,menubars=no,statusbar=NO, status=NO, resizable=YES,location=NO")
}


Otro detalle menos relevante para este ejercicio pero importante para no liarse con el código Javascript es que la ventana del calendario puede o no estar abierta cuando se pulsa el botón. En nuestro caso, si se detecta que está abierta, se ordena cerrarse y luego se vuelve a abrir. Así nos aseguramos que la ventana se queda siempre abierta en el mes actual y siempre visible, al abrirse por encima de la ventana donde estaba el formulario.

En nuestro ejemplo vamos a colocar la función en un archivo a parte llamado javascripts.js, que incluiremos desde la cabecera del documento HTML que pretenda utilizar el calendario. La manera de incluir scripts Javascript en archivos externos la vimos en el primer manual de Javascript.

<script language="JavaScript" src="calendario/javascripts.js"></script>

Autor

Miguel Angel Alvarez

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

Helheim

19/7/2007
Hay un par de cosas de la funcion muestraCalendario que no llego a comprender. Mas bien de los parametros que recibe.
Entiendo que recibe como parametros tanto el nombre del campo como el nombre del formulario procedentes de la funcion escribe_formulario_fecha_vacio($nombrecampo,$nombreformulario) (que se encuentra en la libreria calendario.php) pero, de donde saca los otros tres parametros que recibe muestraCalendario(raiz,formulario_destino,campo_destino,mes_destino,ano_destino)?. Los parametros a los que me refiero son $raiz, $mes_destino y $ano_destino. No llego a comprender de donde salen esas tres variables.
Podria alguien explicarmelo, por favor?.

Gracias.

troyanocab

14/1/2010
tengo problemas al meter la fecha nuevamente al formulario
tengo problemas al meter la fecha nuevamente al formulario me sale asi ... no se como que no compilar el javasecript.. me pueden ayudar....
11 //también debe cerrar la ventana del calendario
12 var formulario_destino = 'usuarios.php'
13
14 var campo_destino = 'vigencia'
15
16 //meto el dia
17 eval ("opener.document." + formulario_destino + "." + campo_destino + ".value='" + dia + "/" + mes + "/" + ano + "'")
18 window.close()
19 }
20 </script>
21</head>

esteban

20/3/2010
ayuda
el calendario me funciona a la perfeccion con solo una fecha
estoy haciendo un carrito de compras y necesito agregar fechas
para algunos`productos, al confirmar pedido pido lo que son las fechas
y segun la cantidad de cada producto imprimo con un for varios datapicker
pero al intertar guardar no busco como mandar el vector a otra pagina php y asi guardar.

Anita

17/10/2013
carrito de compras
una consulta, cómo hiciste el carrito de compras en javascript??

Rafael

07/5/2018
No aparece calendario
Hola. Realice los pasos como informas en el articulo, pero resulta que abre el calendario en blanco, como error de pagina web. Podrias decirme que puede ser. Gracias