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 Tutorial jQuery is a lightweight JavaScript library that simplifies the HTML DOM manipulating, event handling, and creating dynamic web experiences. The main purpose of jQuery is to simplify the usage of JavaScript on websites. jQuery achieves this by providing concise, single-line methods for complex JavaSc
8 min read
What is Ajax ? Imagine browsing a website and being able to submit a form, load new content, or update information without having to refresh the entire page. That's the magic of AJAX. Asynchronous JavaScript and XML (AJAX) is a web development technique that allows web pages to communicate with a web server asynch
5 min read
JQuery Set the Value of an Input Text Field Set the value of an input text field in jQuery is useful while working with forms. It is used to add new value to the input text field. In jQuery, there are various methods to set the value of input text fields, these are - val(), prop(), and attr(). These method offers unique capabilities for setti
3 min read
How to change Selected Value of a Drop-Down List using jQuery? We will change the default selected value of the dropdown using jQuery. In an HTML select tag, the default selected value is the value given to the first option tag. With jQuery, it is easy to change the selected value from a drop-down list. Below are the methods to change the selected value of a dr
3 min read
Form Validation using jQuery Form validation is a process of confirming the relevant information entered by the user in the input field. In this article, we will be validating a simple form that consists of a username, password, and a confirmed password using jQuery.Below are the approaches for validation of form using jQuery:T
5 min read
jQuery Introduction jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM). jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser Java
7 min read
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. C
3 min read
jQuery ajax() Method The jQuery ajax() method is used to perform asynchronous HTTP requests, allowing you to load data from a server without reloading the webpage. It provides a flexible way to interact with remote servers using GET, POST, or other HTTP methods, supporting various data formats.Syntax:$.ajax({name:value,
4 min read
jQuery Cheat Sheet – A Basic Guide to jQuery What is jQuery?jQuery is an open-source, feature-rich JavaScript library, designed to simplify the HTML document traversal and manipulation, event handling, animation, and Ajax with an easy-to-use API that supports the multiple browsers. It makes the easy interaction between the HTML & CSS docum
15+ min read
How to Reset an <input type="file"> in JavaScript or jQuery Sometimes, you may want to clear a file that has been selected by the user in an <input type="file"> field, without having to reload the entire page. This can be useful if the user wants to reselect a file or if you need to reset a form.There are two main ways to reset a file input in JavaScri
2 min read