jQuery UI Date Picker

A date-picker of jQuery UI is used to provide a calendar to the user to select the date from a Calendar. This date picker is usually connected to a text box so user selection of date from the calendar can be transferred to the textbox. You need to add the below CDN to your HTML document to use it.

CDN Links:

<!-- jQuery UI CSS CDN -->
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css' 
 rel='stylesheet'>

<!-- jQuery UI JS CDN -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>

Example 1: The below example illustrates the use of the jQuery UI date picker with its practical implementation.

Output:

👁 datePickerGIF

Example 2: The below example will show how you can set a default date to the datepicker,

Output:

👁 datepicker2GIF

Some features of jQuery UI Date Picker

Managing the date format:

While displaying the calendar we can manage the date format. We can use the following jQuery code in the script section to get the result.

Syntax:

<script> 
$(function() { 
 $( "#my_date_picker" ).datepicker({ 
 dateFormat: 'dd-mm-yy', 
 defaultDate:"24-09-2019"
 }); 
}); 
</script> 

Managing the Weekday:

By default, the first day of the week is displayed from Sunday ( firstDay=0 ). We can change the starting day by changing the value of firstDay.

Syntax:

<script> 
$(function() { 
 $( "#my_date_picker" ).datepicker({ 
 firstDay:2 // Tuesday is first day 
 }); 
}); 
</script> 

Updating Month and Year:

Based on our requirement we can add options for the users to select Month and Year.

Syntax:

<script> 
$(function() { 
 $( "#my_date_picker" ).datepicker({ 
 changeMonth: true, 
 changeYear: true
 }); 
}); 
</script> 

Maximum and Minimum dates to Select:

We can restrict the user selection of Dates from the calendar by assigning a Maximum and Minimum Date value.

Syntax:

$(function() { 
 $( "#my_date_picker" ).datepicker({ 
 maxDate:'+3d', 
 minDate: '-4d' 
 }); 
}); 

Interlocking two Datepickers:

We have two calendars, one calendar is to choose the start date and the other one is to choose end date in the calendar and we will try to interlock them.

Example: The below example will explain the how you can interlock two date pickers.

Output:

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it's philosophy of “Write less, do more". You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.