En nuestros formularios a veces tenemos uno o varios campos para recoger fechas. Los usuarios introducen las fechas como les da la gana y eso dificulta nuestra tarea a la hora de recoger esa fecha e introducirla en nuestra base de datos. Por ejemplo, un usuario puede introducir «25/03/09», otro «03/25/09» y otro «23 de Marzo de 2009».
Para facilitar nuestra labor y la de los usuarios, existen los datePickers o selectores de fechas. Si usamos jQuery, sin duda el mejor datePicker con el que me he encontrado es el desarrollado por Kelvin Luck, que nos permite un sinfín de configuraciones distintas. Vamos a ver cómo usarlo en nuestras webs.
Primero vamos a descargar todo lo necesario:
- jQuery (yo lo he probado con la v.1.3.2)
- jquery.datePicker.js
- datePicker.css
- date.js
Con esto ya podríamos hacerlo funcionar. Sin embargo, si queremos el datePicker en español, necesitamos también el archivo date_es.js (si lo queremos en otro idioma, buscarlo en el listado completo de idiomas).
Incluimos estos archivos en el <head> de nuestra web.
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="date.js"></script> <script type="text/javascript" src="jquery.datePicker.js"></script> <link rel="stylesheet" type="text/css" href="datePicker.css" /> |
Si hemos descargado el archivo date_es.js lo incluimos también, o copiamos su contenido en date.js.
Ahora en un formulario, le añadimos la clase «date-pick» a un input (puedes ponerle el nombre de clase que tú quieras, en realidad).
<input type="text" class="date-pick" id="fecha" name="fecha" value="" /> |
Y por último, añadimos el javascript.
<script type="text/javascript> $(function() { $('.date-pick').datePicker(); }); </script> |
Esto añadirá un enlace que, al clicarlo, abrirá el selector de fechas. Si queremos que el selector de fechas se abra al hacer click en el input, hay que escribir:
<script type="text/javascript"> $(function() { $('.date-pick').datePicker({clickInput:true}); }); </script> |
El formato de fecha que se mostrará en el input dependerá de la configuración de date.js y lo que hayamos puesto en la línea:
Date.format = 'dd/mm/yyyy'; |
Hay muchas formas de configurar el datePicker. Por ejemplo podemos prohibir o permitir que se elijan fechas pasadas, podemos seleccionar una semana, visualizar varios meses a la vez e incluso que el rango de fechas disponibles dependa de la fecha elegida en otro datePicker. Recomiendo echar un vistazo a todas las demos y configuraciones posibles.
Strtotime y las fechas en PHP
Poner las fechas en español en WordPress
Sanear entradas de datos en PHP
Multibox: Flash en un popup para Mootools
Webtips.es se encuentra bajo licencia Creative Commons BY-SA
Hola, alguien sabe como extraer el mes que aparece en palabra sobre el datepicker que se baja del sitio oficial solo necesito eso para una aplicación que estoy realizando.. ojalá alguien pueda ayudarme….
Si te refieres a este datepicker de Kevin Luck, puedes probar con un escuchador de eventos, y cuando se haga click en una fecha, extraer el mes con la función getMonth(). Por ejemplo:
Esto devolvería el número de mes seleccionado (con índice 0, es decir, Enero es el 0, Diciembre es el 11).
Más info sobre escuchadores de eventos en datepicker. Espero que te sirva.
como hago para que se puede seleccionar fechas anteriores al día de hoy?
Para seleccionar fechas del pasado tienes que pasarle un parámetro startDate con la fecha de inicio. Ejemplo:
Aquí tienes una demo.
La respuesta de Webtips es PERFECTA. Has de colocar el parámetro startDate entre () de la llamada a datepicker y A FUNCIONAR. Eso sí, la demo no funciona.
Hola, alguien me puede decir donde ubico el icono del almanaque para colocarselo al lado.
Para usar un icono en lugar de clicar en el input del formulario, tienes que llamar al datePicker sin el parámetro clickInput, de la siguiente forma:
Esto añade a la derecha del input un enlace con la clase dp-choose-date que tendremos que estilar con CSS. Puedes usar el icono original (http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/images/calendar.png) o cualquier otro.
Aquí tienes un ejemplo de cómo se hace: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePicker.html
Gracías, por su pronta respuesta.
Hola quisiera saber como desabilitar los dias pasados a la fecha actual para que el usuario no los pueda elegir, es decir hoy es 1 de abril pues que solo deje escoger los dias siguientes del 1 de abril.
Gracias de antemano…..
Por defecto, este datepicker no te permite elegir fechas anteriores al día de hoy. Es decir, simplemente escribiendo:
Aquí tienes una demo.
Hola a todos soy nuevo en esto de jquery y necesito de su ayuda..como hago para que cuando refresco la pagina no se me pierda el valor que escogi? osea que selecciono la fecha y que esa pase a ser el valor q va a mostrar el calendario
Hola, quise bajarme el código y me da Access Forbidden alguien sabe donde conseguirlo?
Aquí hay otro excelente calendario jquery, espero que sea de ayuda para alguien, Salu2…!
Hola, quiero cambiar el enlace por un icono para abrir el calendario, ya modifique el css y coloque el codigo del ejemplo pero el icono me lo esta colocando a lado izquierdo del input. Si en la clase modifico float: right no me muestra el icono. Si alguien me puede colaborar les agradezco…
hola oye una pregunta y para calcula la edad
con este mismo metodo de poner la fecha con
el calendario ¿Como se haria?
Agradezco esta información, pues me ha resultado muy interesante y me ha resuelto mucho problemas.
quisiera saber como hacer para modificar la ubicación del selector de fecha, me explico, necesito que aparezca asi:
Busque el día: xxxxxxxxx BUSCAR
pero al implementar este calendario me sale:
xxxxxxxxx Busque el dia: BUSCAR
no se Nada de javascrip ni ingles.
gracias por adelantado