Añadir un datepicker a un campo input mediante jQuery UI

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.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

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" id="datepicker"></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.

$( function() {
  var from = $( "#fromDate" )
      .datepicker({
        dateFormat: "yy-mm-dd",
        changeMonth: true
      })
      .on( "change", function() {
        to.datepicker( "option", "minDate", getDate( this ) );
      }),
    to = $( "#toDate" ).datepicker({
      dateFormat: "yy-mm-dd",
      changeMonth: true
    })
    .on( "change", function() {
      from.datepicker( "option", "maxDate", getDate( this ) );
    });

  function getDate( element ) {
    var date;
    var dateFormat = "yy-mm-dd";
    try {
      date = $.datepicker.parseDate( dateFormat, element.value );
    } catch( error ) {
      date = null;
    }

    return date;
  }
});

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" id="fromDate"> TO <input type="text" id="toDate"></p>