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.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
jQuery UI | Date Picker
</title>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
</head>
<body>
Date: <input type="text"
id="my_date_picker">
<script>
$(document).ready(function () {
$(function () {
$("#my_date_picker").
datepicker();
});
})
</script>
</body>
</html>
Output:
Example 2: The below example will show how you can set a default date to the datepicker,
HTML
<!DOCTYPE html>
<html>
<head>
<title>
jQuery UI | Date Picker
</title>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" >
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" >
</script>
</head>
<body>
Date: <input type="text" id="my_date_picker">
<script>
$(function() {
$( "#my_date_picker" ).datepicker({
defaultDate:"09/22/2019"
});
});
</script>
</body>
</html>
Output:
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.
html
<!DOCTYPE html>
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<style>
.ui-datepicker {
width: 12em;
}
h1{
color:green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
Start Date:
<input type="text"
id="my_date_picker1">
End Date:
<input type="text"
id="my_date_picker2">
<script>
$(document).ready(function() {
$(function() {
$("#my_date_picker1").
datepicker({});
});
$(function() {
$("#my_date_picker2").
datepicker({});
});
$('#my_date_picker1').change(function() {
startDate = $(this).
datepicker('getDate');
$("#my_date_picker2").
datepicker("option", "minDate", startDate);
})
$('#my_date_picker2').change(function() {
endDate = $(this).
datepicker('getDate');
$("#my_date_picker1").
datepicker("option", "maxDate", endDate);
})
})
</script>
</center>
</body>
</html>
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.
Similar Reads
jQuery UI Datepicker prevText Option jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQueryUI Datepickers widget in jQueryUI allow users to enter dates easily and visually. In this article we will see how to use prevTe
1 min read
jQuery UI Datepicker isRTL Option jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Datepicker isRTL option is used to check whether the current language is drawn from right to left or not. Syntax: $( ".
1 min read
jQuery UI Datepicker showWeek Option jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI Datepickers widget allow users to enter dates easily and visually. In this article, we will see how to use showWeek option
1 min read
jQuery UI Datepicker showOn Option jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQueryUI Datepickers widget in jQuery UI allows users to enter dates easily and visually. In this article we will see how to use show
1 min read
jQuery UI datepicker option() Method jQuery UI datepicker option(optionName, value) method is used to set the value of the button option associated with the specified optionName. Syntax: $( ".selector" ).datepicker( "option", "disabled", true )Parameters: optionName: Option to be checked.value: Value to be checkedReturn values: This me
1 min read