Add Datepicker to Input Field using jQuery UI

Parvez Alam
3 min readFeb 2, 2023

--

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.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

Parvez Alam
Parvez Alam

Written by Parvez Alam

Hey, I am Parvez Alam. A software developer since 2009. I love learning and sharing knowledge. https://www.phpflow.com/

No responses yet

What are your thoughts?