Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to set Bootstrap Timepicker using datetimepicker library ?

  • Last Updated : 26 Jul, 2021

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’.

FormatDescriptionExample (6/7/2021 06:02:09)
dDisplays day of the month without leading zeros6
ddDisplays day of the monthFr
MDisplays month without leading zeros7
MMDisplays month with leading zeros07
YYDisplays year in 2-digit format-21
YYYYDisplays year in 4-digit format2021
aDisplays meridian in lowercaseam
ADisplays meridian in uppercaseAM
sDisplays seconds without leading zeros9
ssDisplays seconds with leading zeros09
mDisplays minutes without leading zeros2
mmDisplays minutes with leading zeros02
hDisplays an hour without leading zeros in a 24-hour format18
hhDisplays hour with leading zeros in a 24-hour format18

Setting up DateTimePicker:

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=
        rel="stylesheet">
    <script src=
    </script>
    <script src=
    </script>
 
    <!-- Include Moment.js CDN -->
    <script type="text/javascript" src=
    </script>
 
    <!-- Include Bootstrap DateTimePicker CDN -->
    <link
        href=
        rel="stylesheet">
 
    <script src=
        </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 wiht 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>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!