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.
Hoy en CLH, les enseñaremos mediante un sencillo tutorial a realizar esta tarea.
El detalle, como siempre, después del salto.
Como siempre, lo primero:
Con todo lo necesario, vamos, manos a la obra:
1.- Lo primero que debemos hacer es confeccionar un formulario al cual le añadiremos un campo de texto para ingresar la fecha. Si tienen dudas sobre como crear un formulario, pueden revisar este tutorial donde hemos cubierto el proceso por completo.
2.- Una vez que tenemos nuestro formulario listo y hemos descargado la librería Popcalendar (indicada en la sección Implementos Necesarios), debemos descomprimirla en alguna parte de nuestro computador.
Al descomprimir, 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 (ya sea local o en algún FTP de alojamiento Web). Es muy importante mantener la estructura de rutas. Si deseamos mover las imágenes, debemos editar las rutas de estas en el archivo .js.
3.- A continuación, debemos realizar la edición en el archivo de la página donde tenemos el formulario y añadiremos, entre las etiquetas head y /head lo siguiente:
<script language=’javascript’ src=’popcalendar.js’></script>
Con ese trozo de código lo que hemos hecho es incluir la librería correspondiente al calendario a la página con nuestro formulario. El atributo src corresponde a la ubicación del script, por lo que solo debemos mantenerlo así si es que la hemos guardado en el mismo directorio que nuestra página. De lo contrario, debemos modificar aquella ruta para que realice la llamada como corresponde.
4.- 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” />
A esa etiqueta debemos agregarle una pequeña modificación para que sepa que debe realizar la llamada al calendario, por lo que modificaremos el atributo id y añadiremos onClick tal como habíamos detallado antes (en negrita lo que añadiremos/cambiaremos):
<input name=”fecha” type=”text” size=”10″ id=”dateArrival” onClick=“popUpCalendar(this, form1.dateArrival, ‘dd/mm/yyyy’);”>
Pues bien, ¿qué hicimos aquí?
Una vez que hemos hecho las ediciones, guardamos el archivo y probamos todo. Al hacer click en el campo, nos mostrará el calendario con las fechas correspondientes, parecido a este:
Simple, ¿no? Ahora podemos añadir una atractiva funcionalidad que sera muy útil tanto para nuestros usuarios como para nosotros al momento de manipular los datos.
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.
Adicionalmente, 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.
Con esto damos por terminado este tutorial, esperamos que sea de utilidad y agrado de Uds.
Y recuerden que como siempre, esto ha sido:
Cualquier duda o comentario que puedan tener, los invitamos a dejarnos unas líneas en el área habilitada a continuación.
Muchas gracias por leer y será hasta una próxima oportunidad.
10:48:17 pm
ta buenisimo
5:16:35 pm
Señores;
Consulta el calendario lo integre a un formulario el cual esta hecho en php y no me muestra las imagenes, respete el orden de los archivos y nada, saben si existe algun problema con la extencion php.
10:23:32 am
@Valericio: En lo personal lo he utilizado con PHP y no he tenido problemas, aunque los formularios siempre los he desplegado con HTML. Te recomiendo revisar las comillas, muchas veces cuando se insertan atributos, se presentan problemas para que no los tome como cadenas de texto.
Prueba con eso, y si el problema persiste avísanos para ayudarte más a fondo.
Saludos
12:29:03 pm
hola, está buenisimo, pero tengo un problema al hacer click me aparece al principio de la página y debajo del input como que podria hacer para que aparesca debajo, había pensado en un div oculto y mostrar el calendario en dicho div pero no se puedo hacerlo o donde le indico en el js que el calendario aparesca en el div oculto,
gracias y hasta luego.
5:19:20 pm
hola si es de mucha utilidad el calendario pero como prodria extenderle los años que aparezca 2010,2011 etc..
8:36:41 pm
porque en internet explorer 7 se ve bien pero en el el mozilla firefox el calendario aparece en la parte superior izquierda de mi pantalla?
les funciono bien a ustedes?
2:22:41 pm
A mi me paso lo mismo no puedo hacer que en Mozilla se despliegue el calendario en la parte que quiero . . . .
1:15:14 pm
hola pero si quiero que a lado del textbox se muestre una imagen del calendario y dando clic sobre la imagen que muestre la fecha en el text la cual pueda guardar en una base de datos que esta en mysql me gustaria que me ayudara a poder realizarlo y si pudiera contestar en mi correo gracias
2:36:42 pm
@leo: Con Firefox tuvimos un problema similar, hemos investigado y al parecer se trata de un valor de un atributo que lo hace mostrar de forma distinta en los navegadores. Apenas tengamos algo más concreto actualizaremos este tutorial.
@alma: Solo debes colocar una imagen al lado del campo de texto y a esta añadir el id y el atributo onClick, tal como fue indicado, de esa forma te añadirá el calendario ahí.
Saludos!
1:18:29 pm
hola pues es q lo que pasa es q cuando yo lo abro por el IE me abre peerfectamente pero cuando lo intento abrir por el mozilla no me abre el calendario me podrian decir q haglo o ke cambios no le he heho para poder modificar eso lo antes posible????