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.
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; } ?>
Originally published at https://www.js-tutorials.com on February 2, 2023.