Add Datepicker to Input Field using jQuery UI

The Datepicker helps to input a date by selecting from calendar without manually enter in the input field. When you want to collect date from the user, adding datepicker to input filed can provide a good user experience. Using jQuery plugin you can easily add a datepicker to the input field. There are many datepicker plugins are available, but jQuery UI Datepicker is a highly configurable plugin to add datepicker in the web page.

In this tutorial, we will show you how to add datepicker to input field using jQuery UI. By adding the date-picker functionality, the calendar opens when the associated input field is focused. The user can choose a date (day, month, and year) from this overlay calendar. Here we will provide the example code of some mostly used date-picker functionality.

jQuery UI Plugin

At first, include the required libraries to use jQuery UI plugin.

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

Datepicker Basic Functionality

This example code adds basic datepicker functionality to the input field.

JavaScript Code:
The input field ID (datepicker) needs to be specified as datepicker selector.

$(function(){
    $("#datepicker").datepicker();
});

HTML Code:
On the input field focus, an interactive calendar will open in an overlay.

<p>Date: <input type="text" id="datepicker"></p>

Datepicker Advanced Functionality

The following examples are some advanced configuration options that can be used in jQuery Datepicker.

Change Date Format:
By default, datepicker uses MM/DD/YYYY format. Use dateFormat option to change the date format as per your needs.

$(function(){
    $("#datepicker").datepicker({
        dateFormat: "yy-mm-dd"
    });
});

Month & Year Select Option:
By default, month & year are changed by the left & right arrow. Use changeMonth and changeYear option to display the menus for changing the month and year.

$(function(){
    $("#datepicker").datepicker({
        changeMonth: true,
        changeYear: true
    });
});

Restrict Date Range:
Initially, any date can be selected, but you can restrict using minDate and maxDate option.

$(function(){
    $("#datepicker").datepicker({
        minDate: 0,
        maxDate: "+1M +5D"
    });
});

Datepicker with Date Range (From Date & To Date)

The following example shows how you can implement date range select functionality in the form input field. This code allows the user to select From Date and To Date, but it restricts the user to select a previous date as To Date.

JavaScript Code:
Specify the ID of From (fromDate) and To (toDate) input field.

$( 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;
  }
});

HTML Code:
The user can select any date on From Date calendar, but only the greater or equal date will be selected on To Date calendar.

<p>Date: <input type="text" id="fromDate"> TO <input type="text" id="toDate"></p>