Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to make basic Datepicker using jQuery UI?
The datepicker interface element, which is frequently used during web development, helps individuals choose a date from a graphical calendar. A sophisticated and adjustable datepicker widget is one of the many UI widgets and effects offered by the well-known jQuery UI toolkit, that are employed to create websites. In this article, we'll cover all the steps needed to make a straightforward datepicker with jQuery UI.
Datepicker in JQuery
A very customizable plugin that gives your pages datepicker capabilities is the jQuery UI Datepicker. You may easily add buttons and other navigation options, limit the selectable date ranges, and change the date format and language.
By default, when the related text field receives focus, a tiny overlay with the datepicker calendar opens. Just affix it to a div or span for an inline calendar.
Approaches
To make a basic accordion using jQuery Mobile we can follow the two methods −
Utilizing the datepicker() function.
Utilizing the datepicker() function with a customization option.
Let us look into both approaches −
Approach 1: Utilizing the datepicker() function
The datepicker() function for the JQuery UI is used to pick the date from the calendar. It acts as a plugin where the calendar opens up in a small overlay where we can choose dates from the datepicker calendar. One can also add internal css with the help of style tags and customize input tag as well as text in the body section.
Algorithm
To make a basic Date picker utilizing JQuery follow these steps −
Step 1 − Add both the jQuery library and the jQuery UI library in the HTML section for adding the datepicker() function as UI.
Step 2 − In the input, the tag is utilized to take the date from the input.
Step 3 − Utilizing input tag with datepicker() function in the script for id=”pickDate”
Step 4 − Add styles as internal css for span tags to enhance the appearance of the page.
Example
<!DOCTYPE html>
<html>
<head>
<!--Add style to make the appearance better-->
<style>
/*Add style to the text of the content*/
body{
color:purple;
font-weight: bold;
}
/*Add style to the input tag*/
input {
background-color: #ffff97;
border: 2px solid purple;
}
</style>
<!--Add jQuery css -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!--Add jquery scripts to add functionality in the code-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!--Add jquery scripts to add functionality in the code-->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
Pick date: <input type="text" id="pickDate">
<script>
$(function() {
$("#pickDate").datepicker();
});
</script>
</body>
</html>
Approach 2
Utilizing the datepicker() function with a customization option.
Date formatting can be done by adding the attribute dateFormat with the datepicker(). This can provide particular formatting to the date that has been chosen with datepicker().
Algorithm
To make a basic Date picker utilizing JQuery follow these steps −
Step 1 − Include the jQuery library as well as the jQuery UI library in the HTML section for adding datepicker() function as UI, and to pick the date.
Step 2 − In the input, the tag is utilized to take the date from the input.
Step 3 − Utilizing input tag with datepicker() function in the script for id=”pickDate” also add dateFormat for customization of date format.
Step 4 − Add styles as internal css for span tags to enhance the appearance of the page.
Step 5 − Add background color to the input tag and also add a border to it.
Step 6 − Change the format color of the text in the body.
Example
<!DOCTYPE html>
<html>
<head>
<!--Add style to make the appearance better-->
<style>
/*Add style to the text of the content*/
body{
color:purple;
font-weight: bold;
}
/*Add style to the input tag*/
input {
background-color: #ffff97;
border: 2px solid purple;
}
</style>
<!--Add jQuery css -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!--Add jquery scripts to add functionality in the code-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!--Add jquery scripts to add functionality in the code-->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
Pick date: <input type="text" id="pickDate">
<script>
$(function() {
$("#pickDate").datepicker({
dateFormat: 'dd-mm-yy',
});
});
</script>
</body>
</html>
Conclusion
Utilizing jQuery UI to build a simple datepicker is a quick and efficient method to include date-selecting capabilities in your websites. You may modify its functionality and appearance with only a few lines of code, choosing different date ranges, altering the format and language, and more. You can rapidly incorporate a datepicker into your project to enable users to input dates fast and easily by following the strategies described in this article.
47 Views
