How to use the datetimepicker plugin available in jQuery. In JQuery
The datetimepicker plugin in jQuery can be used to make an element to open a date time picker on click to it.
CDN Links
<!-- DateTime picker CSS CDN -->
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" />
<!-- DateTime picker JS CDN -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js">
</script>
Note: These CDN links must be included in the head tag in order to utilize all functionalities of the datetimepicker plugin.
Example: The following code demonstrates the date picker feature of the jQuery datetimepicker plugin.
HTML
<!DOCTYPE html><html><head> <!-- jQuery CDN --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <!-- CSS CDN --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" /> <!-- datetimepicker jQuery CDN --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"> </script> <!-- Basic internal styling --> <style> body { text-align: center; } p { font-size: 25px; font-weight: bold; } </style></head><body> <h1 style="color:green">w3wiki</h1> <p>jQuery - Set datetimepicker on textbox click</p> <input type="text" class="datetimepicker" /> <input type="text" class="datetimepicker" /> <script type="text/javascript"> $(".datetimepicker").each(function () { $(this).datetimepicker(); }); </script></body></html> |
Output:
How to open datetimepicker on textbox click using jQuery ?
In this article, we will see how to set a datetimepicker to select a date and time on a textbox click or input element click using jQuery. Below approaches can be used to accomplish this task:
Table of Content
- Using the datetimepicker plugin available in jQuery.
- Using the Bootstrap datetimepicker plugin along with jQuery
Contact Us