How to set Bootstrap Timepicker using datetimepicker library ?

Last Updated : 31 Jul, 2024

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 lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DateTime Picker</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 src=
"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js">
   </script>

    <!-- Include Bootstrap DateTimePicker CDN -->
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/
 css/bootstrap-datetimepicker.min.css" 
          rel="stylesheet">
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/
 4.17.47/js/bootstrap-datetimepicker.min.js">
   </script>

    <style>
        body {
            background-color: #f8f9fa;
        }

        .container {
            margin-top: 100px;
        }

        .form-group {
            position: relative;
        }

        .clear-button {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="form-group">
            <label for="datetime">Select Time:</label>
            <input class="form-control" 
                   type="text" 
                   id="datetime" 
                   placeholder="hh:mm:ss am/pm" />
            <span class="glyphicon glyphicon-remove clear-button" 
                  id="clear-datetime">
           </span>
        </div>
    </div>

    <script>
        $(function() {
            $('#datetime').datetimepicker({
                format: 'hh:mm:ss a'
            });

            $('#clear-datetime').click(function() {
                $('#datetime').val('');
            });
        });
    </script>
</body>

</html>