Los datepickers ayudan a los usuarios a seleccionar una fecha a través de un calendario. Así se evitan errores casi siempre ocasionados por una mala introducción de la fecha, como por ejemplo, un mal formato. Mediante el plugin jQuery puedes añadir facilmente un datepicker a un campo input. Existen muchos plugins de datepicker disponibles, pero jQuery UI Datepicker es uno de los mejores ya que cuenta con muchas opciones de personalización.
En este tutorial, te mostraremos cómo añadir un datepicker a un campo input utilizando jQuery. Con este datepicker, cada vez que se haga clic en un campo input concreto, se abrirá un calendario. El usuario podrá escoger de dicho calendario, una fecha (día, mes y año).
Jquery UI
Antes que nada, debemos incluir la librería jQuery UI para utilizar sus funciones.
Funcionalidad básica del Datepicker
En este ejemplo, os muestro cómo añadir un datepicker a un campo input.
Código Javascript
Debemos especificar el ID del campo input como selector del datepicker.
$(function(){ $("#datepicker").datepicker();});
Código HTML
Cuando se haga focus en el campo input, se abrirá un calendario interactivo.
<p>Date: <input type="text"></p>
Funcionalidad avanzada del Datepicker
En las siguientes líneas veremos cómo hacer un uso más avanzado del Datepicker mediante las múltiples opciones que nos ofrece.
Cambiar formato de fecha
Por defecto, el plugin utiliza el formato MM/DD/YYYY. Mediante la opción dateFormat podemos cambiar el formato de fecha según nuestras necesidades.
$(function(){ $("#datepicker").datepicker({ dateFormat: "dd-mm-yy" });});
Seleccionar mes y año
Por defecto, cambiamos de mes y año con las flechas de izquierda y derecha. Con las opciones changeMonth y changeYear podemos mostrar un menú con el cual seleccionar el mes y el año.
$(function(){ $("#datepicker").datepicker({ changeMonth: true, changeYear: true });});
Restringir un rango de fechas
Con Datepicker puedes seleccionar cualquier fecha, pero si quieres restringir esto, puedes utilizar las opciones minDate y maxDate.
$(function(){ $("#datepicker").datepicker({ minDate: 0, maxDate: "+1M +5D" });});
Datepicker desde hasta
En el siguiente ejemplo te muestro cómo implementar un datepicker en el que el usuario tenga que introducir una fecha desde, y una fecha hasta. La miga de este script es que la fecha hasta, nunca puede ser anterior a la fecha desde.
Codigo HTML
El usuario puedes seleccionar cualquier fecha en el campo Desde, pero solo puede seleccionar una igual o mayor al anterior valor en el campo Hasta.
<p>Date: <input type="text"> TO <input type="text"></p>