How to set Bootstrap Timepicker using datetimepicker library ? - GeeksforGeeks

27 Jan, 2022
In this article, we will see how we can implement DateTimePicker using a Bootstrap Daterpicker plugin to select a date and time using jQuery. By default, today’s date is selected. DateTimePicker has various configurable options which can be used to use DateTimePicker as per the requirements. In this tutorial, we will see how we can implement DateTimePicker using a Bootstrap DaterTimePicker plugin to select a date and time.
DateTimePicker has the following views:
Decade View
Year View
Month View
Day View
Hour View
Day view with meridian
Hour view with meridian
DateTimePicker  can be formatted in the following ways:
yyyy-mm-dd
yyyy-mm-dd hh:ii
yyyy-mm-ddThh:ii
yyyy-mm-dd hh:ii:ss
yyyy-mm-ddThh:ii:ssZ
DateTimePicker Format: The default format is the string ‘mm/dd/yyyy’.
Step 1: Include Bootstrap and jQuery CDN into your <head> before all other stylesheets to load our CSS. 
<link href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js”></script> <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
Step 2: Include DateTimePicker JS and CSS CDN just after the Bootstrap CSS CDN.
<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js”></script><link href=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css” rel=”stylesheet”><script src=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js”> </script>
Step 3: Include the code below in <body> to accept time from the user.
<div class="container" style="margin: 50px">  
   <div style="position: relative">  
       <input class="form-control" type="text" id="time"/>  
   </div>  
</div>  
Note:  DateTimePicker component should always be placed within a relatively positioned container.
Step 4: Add the following JavaScript in <script> tag after the <body> tag to specify ‘HH:mm:ss’ format to DateTimePicker. 
$('#time').datetimepicker({
    format: 'yyyy-mm-dd'
});
Note: Custom format can be specified as per the requirement. 
Example: 
HTML
<!DOCTYPE html><html> <head>    <title>DateTimepicker</title>     <!-- Include Bootstrap CDN -->    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"        rel="stylesheet">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">    </script>     <!-- Include Moment.js CDN -->    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js">    </script>     <!-- Include Bootstrap DateTimePicker CDN -->    <link        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css"        rel="stylesheet">     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js">        </script></head> <body>     <!-- Include datetime input to display        datetimepicker in container with        relative position -->    <div class="container" style="margin:100px">        <div style="position: relative">             <!-- Include input field with id so                that we can use it in JavaScript                to set attributes.-->            <input class="form-control"                type="text" id="datetime" />        </div>    </div>     <script>         // Below code sets format to the        // datetimepicker having id as        // datetime        $('#datetime').datetimepicker({            format: 'hh:mm:ss a'        });    </script></body> </html>
simmytarika5
clintra
Bootstrap-Questions
Picked
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
How to keep gap between columns using Bootstrap?
Tailwind CSS vs Bootstrap
How to place table text into center using Bootstrap?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?