Skip to main content
Add Datepicker to Input Field using jQuery UI

Add Datepicker to Input Field using jQuery UI

in this post, We’ll learn how to add a date picker to an input text field. The Datepicker helps to input a date by selecting it from the calendar.

The end user can input the date from the popup calendar without manually enter in the input field.

There are numerous datepicker plugins available, but jQuery UI Datepicker is a highly flexible plugin to add datepicker to the web page.

Checkout Other tutorials:

jQuery UI Datepicker

The jQueryUI Datepicker gives users the option to choose a single date or a range of dates from a pop-up or an interactive inline calendar, making it simple to enter the date into an input field.

The Datepicker is generally attached to an input textbox.

The Syntax:

$(selector, context).datepicker(options)

Add a jQuery Datepicker

In this tutorial, we will show you how to add datepicker to the input field using jQuery UI.

Let’s add a date picker to a html file. Whenever the user will click the calendar icon, the calendar popup ll open and The user can choose a date (day, month, and year) from this overlay calendar.

The selected date will display in the text box.

Step 1: 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>

Step 2: Create an input field into an HTML file, The calendar will open in an overlay when the user will clicked/focus on the calendar widget.

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

Step 3: Let’s add a basic datepicker widget to the input field. Datepicker Selector must be given as the input field’s Id.

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

Datepicker Configuration Options

There are numerous configuration options available that help to enhance the date-picker functionality. You can see all available options from here jQuery UI Datepicker Configuration Options

How To Change Date Format:

The dateFormat option to change the date format as per your needs.

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

Month & Year Select Option:

You can use changeMonth and changeYear options to display the menus for changing the month and year.

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

Restrict Date Range:

We can restrict using minDate and maxDate options.

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

Datepicker with Date Range

You can also implement date range select functionality in the form input fields. This code enables the user to choose From Date and To Date, but it prevents the user from choosing a previous date for To Date.

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

Let’s create two textbox that will take FromDate and ToDate from the calendar, but only the greater or equal date will be selected on ToDate calendar.

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

How To Get Date value Server Side

We can retrieve date value from the input field using $_POST method in PHP.

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

Leave a Reply

Your email address will not be published. Required fields are marked *