Calendario Emergente JavaScript para usar en Formularios

Calendario Emergente JavaScript para usar en Formularios
Muchas veces cuando presentamos formularios en nuestros sitios o sistemas Web,
necesitamos que los usuarios ingresen una fecha para utilizar como parámetro. El principal
problema que se presenta es asegurarnos que esta fecha se ingrese en el formato ideal.
Una de las mejores respuestas para esta inquietud es integrar un calendario al formulario, el
cual además de darnos el formato requerido, presenta una funcionalidad atractiva visualmente
para quienes hacen uso del sitio.
Para poder hacer este calendario emergente solo necesitas de un archivo javascript que es llamado desde el head
de nuestra pagina, o si el archivo es php se llama con php, cuando uno da click en el campo detona la función
principal esta genera los dias apartir del actual por medio de un algoritmo matematico.
PASO 1. Si nuestro archivo es php, entonces ponemos, la siguiente llamada y ya no la del head.
<? echo("<script languaje=\"javascript\" src=\"../calendario/popcalendar.js\" > </script>"); ?>
(Hay que prestar atención a la ruta, puedes ver dos rutas diferentes la del head y la del php)
Una vez que tenemos nuestro formulario listo y hemos descargado la librería Popcalendar,
tendremos una serie de archivos. Debemos mover popcalendar.js y el directorio images a la
carpeta donde tenemos alojado nuestro sitio Web con el formulario . Es muy importante
mantener la estructura de rutas. Si deseamos mover las imágenes, debemos editar las rutas de
estas en el archivo .js.
Luego que hemos realizado la inclusión del archivo, debemos hacer la modificación
correspondiente en el campo de texto donde queremos que se ingrese la fecha.
Lo que haremos será añadir un atributo a este campo de texto llamado onClick, de esta forma
cuando un usuario haga click sobre el campo de texto (intentando escribir por ejemplo) se
desplegará el calendario en pantalla para que seleccionen la fecha y esta se escribirá
automáticamente en el formato que definamos sobre el campo.
Así que revisamos el código de nuestro formulario y vamos a la etiqueta correspondiente al
campo de texto de la fecha, por ejemplo, en este caso, tendríamos algo como:
<input name=”fecha” type=”text” size=”10″ id=”fecha” />
que vamos a cambiar por lo siguiente
Cambiamos el id a dateArrival para que reconozca el id correspondiente al calendario para
estilizar la etiqueta.
Añadimos el atributo onClick que le dice al formulario: “Cuando se haga click, ejecute esto” y
ejecutará la función popUpCalendar de la librería, enviando como parámetro el nombre del
formulario (form1 que viene por defecto, si lo han cambiado deben modificar aquí) y el formato
de la fecha (en este caso dimos un formato día/mes/año, con 2 dígitos para el día, 2 dígitos
para el mes y 4 dígitos para el año. Pueden modificarlo como lo necesiten, para la base de
datos se debe leer yyyy-mm-dd).
Es común que al implementar el calendario no resulte la primera vez, les recomendamos fijarse
en la etiqueta del formulario, que las comillas esten bien definidas, eso es un problema común.
Si necesitamos implementar más de un calendario en la misma página
podemos hacerlo de la misma forma, solo asegurándonos de cambiar el atributo id de la
etiqueta para que no sea el mismo, por ejemplo dos campos:
<input name="fechasiguiente" type="text" id="dateArrival" onClick="popUpCalendar(this,
insertregistro.dateArrival, 'yyyy/mm/dd');">
<input name="fechaprueba" type="text" id="dateArrival1" onClick="popUpCalendar(this,
insertregistro.dateArrival1, 'yyyy/mm/dd');">
DEBEMOS PRESTAR ATENCIÓN en el archivo popcalendar.js
-
Linea 4 sirve para ver o no el número de la semana en el calendario
Linea 6 indica la url de las imágenes que forman el calendario, su vista.
Linea 117, aquí se puede cambiar la apariencia del calendario, color, letra. Es necesario
modificar la url del td background para ver el fondo llamado callback.jpg
Linea 128 el mes de agosto aparece como augusto
Linea 305 indica los años que cubre el periodo a ver