jQuery date picker plug-in

Escrito por: Martín el 23-12-2008 17:04:00 y leído 2783 veces

Ú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]

Categorías: Jquery • Javascript • Date-picker • Fecha • •

Artículos relacionados:

• 20 plugins para jQuery que no pueden faltar en tus webs
• Excelente listado de 240 plugins para jquery
• Menú o barra lateral (sidebar) siempre visible con scroll y jQuery
• jQuery Validate: la rápida validación de formularios.
• Formularios web con jQuery Validate y envío por phpmailer y gmail
• Calendario en PHP con eventos, jQuery y vTip
• 18 plugins jquery que no pueden faltar en tu web parte 2

100 Búsquedas de este artículo:

jquery datepicker • datepicker jquery • ejemplos datepicker jquery • calendario formulario jquery • descargar datepicker jquery • datepicker jquery ejemplos • ejemplo datepicker jquery • datepicker jquery ejemplo • datepicker jquery php • jquery datepicker plugin • manual datepicker jquery • datepicker jquery descargar • calendario jquery datepicker • formulario calendario jquery • campo fecha nacimiento jquery • ejemplos de datepicker • jquery datePicker ejemplos • datepicker php jquery • datepicker jquery download • campo fecha jquery • jquery datepicker tutorial • instalar datepicker jquery • ejemplo datepicker • jsp jquery datepicker ejemplo • codigo de ejemplo de jquery date • descargar datepicker y pasos de como usarlo en php • seleccionar fecha en formulario con jquery • jquery date picker • jquery datepicker js • jquery fecha • jquery datepicker ejemplo • tutorial datepicker jquery • data picker • descargar datepicker php • seleccionar fechas datepicker jquery • instalar jquery datepicker • calendario jquery jsp • datepicker jquery plugin • datepicker jquery php español • datepicker con jquery • plug in calendario formulario • ejemplos datepicker javascript • Datepicker • instalar datepicker • ejemplo datepicker jquery php • jquery descargar datepicker • datepicker fecha nacimiento • calendario formularios jquery • jquery campo fecha • google form datepicker • calendario jquery formulario • campo fecha con jquery • integrar jquery datepicker con php • calendario picker • marcara fecha jquery calendario • ejemplo jquery datepicker plug-in es • que plugins incluir para el calendario datepicker de jquery • jquery fecha nacimiento • formatear fecha jquery • calendario en formularios con jquery • calendario no formulario jquery • ejemplo de datepicker jquery • ejemplos combo jquery jsp bordes redondeados • calendario jquery form • descargar datepicker para php • formularios con jquery validate y datepicker • datepicker implementar formulario • datepicker jquery tamaño • datepicker marcar dias • ejemplos comparar fechas jquery • varios datapicker en un formulario • datepicker jquery bonito y bueno • incluir datepicker jquery • jquery picker • codigo para seleccionar fecha de nacimiento de un calendario con javascript • instalar datepicker en formulario • datePicker jquery y php • ejemplos de datepicker jquery • ejemplos de jquery download de taringa • uso de datechoosercombo • formulario con calendario jquery • <script type=text/javascript src=datechooser js></script> cambiarle el color • ejemplos datepicker • plugin jquery menu, botones, datepicker • formulario con jquery fechas • control de calendario en formulario jquery • Validar fecha de nacimiento jquery • calendario para poner fecha de nacimiento con jquery • como poner datepicker fijo jquery • que es jquery • calendar jquery ejemplo • campo de fecha jquery • calendariofecha ajax • ejemplo jquery datepicker • datepicker jquery resaltar una columna • inicializar calendario jquery con fecha actual • descargar datapicker jquery • estilo datepicker jQUERY • calendario jquery android • jquery date picker php •