Diseño Web

Ξ 74 comentarios

Cómo añadir un calendario a tus formularios

por Xabadu
Cómo añadir un calendario a tus formularios

calendario2

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.

Cómo añadir un calendario a tus formularios

Como siempre, lo primero:

Implementos necesarios:

  1. Una página Web con un formulario.
  2. Un editor Web (en CLH recomendamos y utilizamos Adobe Dreamweaver. Pueden descargar la versión CS4 desde este enlace).
  3. Popcalendar, que es un calendario emergente hecho en Javascript. (pueden descargarlo desde el sitio de su creador).

Con todo lo necesario, vamos, manos a la obra:

Procedimiento:

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í?

  • 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).

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:

calendario

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.

Comparte este tutorial

El culpable de todo esto

Las tardes gloriosas de domingo y las grandes ovaciones a estadio lleno, no son algo extraño para Xabadu. Luego de ser descubierto a los 4 años en un partido de barrio por los ojeadores del gran Aviación F.C., sacudió el mercado nacional al ser traspasado en $500 pesos chilenos (1 USD) y 3 coca colas al renombrado Estrella Blanca de Lolol. Luego de una impresionante carrera por equipos como Lozapenco, Santa Cruz, Deportivo Lago Chungará y una incursión en la 3a división del futbol de Kazajstan, su record imbatible hasta la fecha de 1257 goles en 20 partidos lo llevo a ser elegido como uno de los arqueros más recordados en la historia pelotera nacional. Una lesión en el colmillo superior derecho lo llevó al retiro el año 2003, pero está de vuelta y sin duda que su jerarquía y experiencia internacional será un gran aporte.

En los barrios marginales se le conoce como: Xabadu

Comentarios en Facebook

74 Comentarios

  • Hola!
    Estoy armando mi pagina y use este calendario, esta muy bueno, gracias! Pero me pasa lo mismo que a algunos, que aparece arriba a la izquierda… alguien encontro la solucion para ubicarlo mejor?
    Gracias!!!

  • Esto me funciona solo con una fecha, pero tengo que ingresar tres fechas en mi DB MySQl y tengo la intranet en html y la pase a PHP, Como LO HAgoooo..!!!!

  • hla muy bueno el caledario me sirvio .
    me gustaria preguntarte algo, porque nececito algo como para que los clientes puedan pedir turnos con un calendario y que en este muestre los dias que ya estan ocupados por otros turnos o pedidos de turnos espero me entiendad gracias…

  • Hola Xabadu
    Muy bueno el código… felicidades..
    Ahora tengo un problemilla al añadirlo en la base de datos en mysql. No me pasa los datos, me pasa 0000-00-00, en formato ingles, no español.. como hacer que convierta los valores para que los entienda la BBDD?
    Tengo este código, que ya me cambia el formato, pero el mysql sigue sin enterarse, alguna idea?

    function cambiaf_a_mysql($data){
        ereg( “([0-9]{1,2})/([0-9]{1,2})/([0-9]{2,4})”, $data, $mifecha);
        $lafecha=$mifecha[3].”-“.$mifecha[2].”-“.$mifecha[1];
        return $lafecha;
    }

    Gracias
    David

  • hola pues el formulario si me funciona y todo pero tengo un incoveniente por que al darle click en la caja de texto este se me alarga mucho lo cual daña el estilo de mi formulario , quisiera que alguien me pueda ayudar pues mi pagina esta combinada html con css y pues por tener css me genera error les agradeceria .

  • a mi si me despliega pero tengo un archivo q es  .php y en firefox y google chrome se me desconfigura el css del calendario y me sale en la parte superior izquierda quisiera saber como lo puedo arreglar?? gracias

  • hola tengo un problema que no me muestra el calendario en la pagina simplemente no hace nada pero si inpecciono la pagina el calendario esta ahi solo qeu no s eporque no me lo muestra
    saludos si alguien me puede ayudar genial

  • Holaa a todos.. aun no se ha solucionado lo del calendario en Mozilla ?

    Es de suma importancia para mi.. gracias de antemano

  • aun no se ha solucionado lo del calendario en Mozilla ?

  • Ya vi cual es el problema que tiene, el porque sale al principio al parecer esta cabezara lo provoca
    y si lo cambias por otro tipo de cabezera ahora si aparece abajo del text pero en mi casa me deja de respetar los archivos css. ¿como se puede solucionar ese problema?

1 2 3 4 5 8

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Gente linda que nos quiere

Donde mas estamos