Open In App

How to set Bootstrap Timepicker using datetimepicker library ?

Improve
Improve
Like Article
Like
Save
Share
Report

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

Format Description Example (6/7/2021 06:02:09)
d Displays day of the month without leading zeros 6
dd Displays day of the month Fr
M Displays month without leading zeros 7
MM Displays month with leading zeros 07
YY Displays year in 2-digit format- 21
YYYY Displays year in 4-digit format 2021
a Displays meridian in lowercase am
A Displays meridian in uppercase AM
s Displays seconds without leading zeros 9
ss Displays seconds with leading zeros 09
m Displays minutes without leading zeros 2
mm Displays minutes with leading zeros 02
h Displays an hour without leading zeros in a 24-hour format 18
hh Displays hour with leading zeros in a 24-hour format 18

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


Output:



Last Updated : 27 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads