Add Datepicker to Input Field using jQuery UI

The Datepicker helps to input a date by selecting it from the calendar without manually entering the input field. When you want to collect date input from the user, adding a datepicker to the input field can provide a good user experience. Using the jQuery plugin you can easily add a datepicker to the input field. There are various datepicker plugins available, but jQuery UI Datepicker is a highly configurable plugin to add datepicker on 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 widget will open when the associated input field is focused or clicked. 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 datepicker functionality.

jQuery UI Plugin

First, include the required libraries to use the jQuery UI Datepicker plugin.

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

Datepicker Basic Functionality

This example code adds a basic datepicker widget 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>

Datepicker Input Submission with PHP

In this example code, we will show you how to submit the input date and get the selected date from the datepicker using PHP.

Datepicker Input:
Define an HTML form with input element to submit the selected date.

<input type="text" name="datepicker" id="datepicker">

Attach datepicker to text input field using jQuery.

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

Get Date value with PHP:
Retrieve date value from input field using $_POST method in PHP.

<?php 
if(isset($_POST['submit'])){ 
    $selectedDate = $_POST['datepicker']; 
     
    echo 'Selected Date: '.$selectedDate; 
} 
?>

Add Date-Time Picker to Input Field using jQuery

Conclusion

In this example code snippet, we have shown you the most used date picker functionalities. With our sample code, you can fulfill all the datepicker requirements for your web application. However, you can enhance the date-picker functionality with various configuration options, see all available options from here – jQuery UI Datepicker Configuration Options.