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:

Table of Content

Using the datetimepicker plugin available in jQuery.
Using the Bootstrap datetimepicker plugin along with jQuery

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>