BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

jQuery date picker plug-in

23/DIC/2008 8.464 visitas Ver comentarios
jQuery date picker plug-in

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

Ú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 1 - HTML
<!-- 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 2 - JAVASCRIPT
$(function()
{
$('.date-pick').datePicker().val(new Date().asString()).trigger('change');
});
Código 3 - HTML
<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>

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 21 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018