http://keith-wood.name/datepick.html
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
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.
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
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.