How to display date picker in the page using jQuery UI ?
Last Updated :
26 Nov, 2021
DatePickers are needed whenever we want to ask for the date from the user. We can store the data and use it for future uses. jQuery provides an easy method to create our DatePicker. The DatePicker of jQuery is inline, so the UI is very simple yet attractive.
Syntax:
We need an input element and then we are going to call the jQuery DatePicker function.
<input type="text" id="dob">
In the script part of the code, call the datepicker() function to instantiate the datepicker widget.
<script>
$("#dob").datepicker();
</script>
Project Setup:
The DatePicker and similar UIs are available from jQuery UI. We need to download them and then store them inside the project directory. Extract it in a folder “jqueryui” in the project directory. The project structure will look like the following.
Import the following files as follows inside the head tag.
<link rel=”stylesheet” href=”/jqueryui/jquery-ui.min.css”>
<script src=”/jqueryui/external/jquery/jquery.js”></script>
<script src=”/jqueryui/jquery-ui.min.js”></script>
Example 1: The following code demonstrates a Simple DatePicker. We will launch the date picker from the input element.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="jqueryui/jquery-ui.min.css">
<script src="jqueryui/external/jquery/jquery.js">
</script>
<script src="jqueryui/jquery-ui.min.js"></script>
</head>
<body>
<h1>Welcome to GeeksforGeeks</h1>
<p>Date of Birth:
<input type="text" id="dob">
</p>
<script>
$("#dob").datepicker();
</script>
</body>
</html>
|
Output:
Example 2: The following code demonstrates a customized DatePicker. Our DatePicker does not have the change of year or month button. Also, the format is not looking good. So we change them as follows.
- changeMonth: It’s of boolean type and if it is set to true, we can change the month.
- changeYear: It’s of boolean type and if it is set to true, we can change the year.
- minDate: Set the minimum date.
- maxDate: Set the maximum date. Setting as +1 indicates tomorrow, or -1 as yesterday. If you want to set the date as next year use +1y or vice versa.
- dateFormat: Set the date format. “dd/mm/yy” sets the date as date first, then the month, and then the year.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="jqueryui/jquery-ui.min.css">
<script src="jqueryui/external/jquery/jquery.js">
</script>
<script src="jqueryui/jquery-ui.min.js"></script>
</head>
<body>
<h1>Welcome to GeeksforGeeks</h1>
<p>Date of Birth:
<input type="text" id="dob">
</p>
<script>
$("#dob").datepicker({
dateFormat: "dd/mm/yy",
maxDate: 0,
minDate: "01/01/2000",
changeYear: true,
changeMonth: true
});
</script>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...