Recursos y Descargas

Esto no es un blog. Es una sección que programé para ir publicando aquellas cositas que me parecen interesantes y, por cualquier motivo, quiero tener a mano. Copia lo que quieras, usa lo que quieras (pero respeta sus licencias).

jQuery date picker plug-in

Escrito por: Martín el 23-12-2008 17:04:00

jQuery date picker plug-in

Últimamente me estoy encontrando con que muchos de mis proyectos requieren la integración de un "date picker" o selector de fecha. ¿No sabes qué es? Esos campos de texto de un formulario en el que te piden una fecha y, generalmente, tienen un botoncito que te abre un calendario flotante que, al seleccionar una fecha, desaparece y coloca la fecha seleccionada en el campo de texto en cuestión.

Pues bien, como casi casi siempre utilizo el mismo, me decidí a subirlo a mi web, aunque la versión original de este plugin, con su documentación completa y ejemplos de varios tipos, puede encontrarse en la web del autor: kelvinluck.

Aquí abajo, pego los 3 pasos para tener este bonito calendario en nuestros formulario de un modo más que rápido y, si quieres verlo antes de instalarlo, te dejo esta demostración online.

Los pasos son, como siempre, muy sencillos:

1) Incluir las librerías en el HEAD de tu página (ver código 1)
2) Iniciar la función del calendario (ver código 2)
3) Armar tu formulario... (ver código 3)

También, he subido un archivo comprimido con los archivos de mi demostración online, donde están, además, las hojas de estilos para personalizar tu calendario.

Que lo disfrutes!

Código XHTML

<!-- jQuery -->
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<!-- required plugins -->
<script type="text/javascript" src="date.js"></script>
<!-- jquery.datePicker.js -->
<script type="text/javascript" src="jquery.datePicker.js"></script>
<!-- datePicker required styles -->
<link rel="stylesheet" type="text/css" media="screen" href="datePicker.css">

Código JAVASCRIPT

$(function()
{
$('.date-pick').datePicker().val(new Date().asString()).trigger('change');
 });

Código XHTML

<form name="chooseDateForm" id="chooseDateForm" action="#">
<fieldset>
<legend>Prueba a Seleccionar una fecha</legend>
<ol>
<li>
<label for="date1">Fecha:</label>
<input name="date1" id="date1" class="date-pick" />
</li>
</ol>
</fieldset>
</form>

[Descargar Adjunto]