How to integrate the Jquery Datetimepicker in HTML

Generally we integrate the datepicker in jquery. it gets only the date but if you want to place the time along with the date use the datetimepicker instead of datepicker.

In jquery has only the datepicker . you need the datetimepicker then you must load the timepicker addon.
You need to load these CSS files

  
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css
https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.css

And you need to load these JS files

http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.js

How to integrate the jquery datepicker

After that place the one input text field and give the id as datetimepicker like this

<input type ="text" id="datetimepicker" name="datetime">

Then bind the date and time picker addon to the id datetimepicker

<script>   
      $(document).ready(function () {   
       $(function() {  
      $("#datetimepicker").datetimepicker({   
       dateFormat: 'yy-mm-dd',   
       timeFormat: 'hh:mm:ss',  
      }).datetimepicker("setDate", new Date());  
      });  
          });   
    </script>

Out put is

How to block the particular weekdays in the jquery datepicker
Datetimepicker code

  
<!doctype html>   
 <html lang="en">  
   <head>  
    <meta charset="UTF-8">  
    <title>Datetimepicker</title>  
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" />  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.css" />  
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>   
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>   
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.js"></script>  
    <style>  
      body {  
      font: 12px sans-serif;  
      }  
    </style>  
   </head>  
   <body>  
    <input type ="text" id="datetimepicker" name="datetime">  
    <script>   
      $(document).ready(function () {   
       $(function() {  
      $("#datetimepicker").datetimepicker({   
       dateFormat: 'yy-mm-dd',   
       timeFormat: 'hh:mm:ss',  
      }).datetimepicker("setDate", new Date());  
      });  
          });   
    </script>   
   </body>  
 </html>

Download Demo

* If you like this post please don’t forget to subscribe Techies Badi - programming blog for more useful stuff

Share this