How to open datetimepicker on textbox click using jQuery ?
Last Updated :
20 Dec, 2023
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:
Using the datetimepicker plugin available 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">GeeksforGeeks</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:
Using the Bootstrap datetimepicker plugin along with jQuery
This approach implements another plugin along with the Bootstrap and the moment.js library. To implement this approach you need to add the below CDNs to your HTML document.
CDN Links
<!-- Bootstrap CSS CDN -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"
integrity=
"sha512-DUC8yqWf7ez3JD1jszxCWSVB0DMP78eOyBpMa5aJki1bIRARykviOuImIczkxlj1KhVSyS16w2FSQetkD4UU2w=="
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<!-- jQuery CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<!-- Bootstrap JS CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- moment.js library CDN -->
<script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js">
</script>
<!-- Bootstrap datetimepicker plugin CSS CDN -->
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css"
rel="stylesheet"/>
<!-- Bootstrap datetimepicker plugin JS CDN -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js">
</script>
NOTE: Please make sure that you are adding the version of jQuery greater than 1.9 and less than 3.0.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jQuery CDN -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"
integrity=
"sha512-DUC8yqWf7ez3JD1jszxCWSVB0DMP78eOyBpMa5aJki1bIRARykviOuImIczkxlj1KhVSyS16w2FSQetkD4UU2w=="
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<!-- Bootstrap CSS CDN -->
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
rel="stylesheet"/>
<!-- Bootstrap JS CDN -->
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<!-- Moment.js CDN -->
<script type="text/javascript"
src=
"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js">
</script>
<!-- Bootstrap Datetimepicker CSS CDN -->
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css"
rel="stylesheet"/>
<!-- Bootstrap datetimepicker JS CDN -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.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; font-weight:bold">
GeeksforGeeks
</h1>
<p>jQuery - Set datetimepicker on textbox click</p>
<div class="container col-xs-2 col-xs-offset-5">
<div style="position:relative">
<input class="form-control"
type="text"
id="date-time-picker" />
</div>
</div>
<script type="text/javascript">
$("#date-time-picker").datetimepicker();
</script>
</body>
</html>
Output:
Similar Reads
How to make basic Datepicker using jQuery UI ? In this article, we will be creating a basic Datepicker using jQuery UI. For localization of Datepicker, refer this article. Approach: First, add jQuery UI scripts needed for your project. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"> </script> <script sr
1 min read
How to create UI Datepicker using jQuery? To implement a jQuery UI Datepicker with localization, configure it to display dates in various languages based on either browser settings or application-specific preferences. Syntax:let userLang = navigator.language || navigator.userLanguage; let options = $.extend({}, // empty object $.datepicker.
2 min read
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 nextText 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 nextTe
1 min read
jQuery UI datepicker onClose 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 onClose Option is called when the datepicker is closed, whether the date is selected or not. The onClose opt
1 min read
jQuery UI datepicker onSelect 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 onSelect Option is called when the datepicker option is selected. The onSelect option holds a function that
1 min read