How to use datetimepicker in bootstrap?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

In this tutorial, we will learn how to create datepicker for Bootstrap 5 projects.

Bootstrap timepicker is used to display the time in minutes or seconds.

Table of contents

  • Include Bootstrap and jQuery
  • Include datetimepicker js and css
  • Include the code in body
  • Add JavaScript in <script> tag

Let’s start with the first step.

Step 1: Include Bootstrap and jQuery

Include Bootstrap and jQuery CDN into your <head> before all other stylesheets to load our CSS.

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">

Step 2: Include datetimepicker js and css

Include datetimepicker js and css cdn just after the bootstrap css cdn.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>

Step 3: Include the code in body

Include the code below in <body> to accept time from the user.

    <div class="container">
        <div class="row">
            <div class='col-sm-6'>
                <div class="form-group">
                    <div class='input-group date' id='datetimepicker1'>
                        <input type='text' class="form-control" />
                        <span class="input-group-addon">  
            <span class ="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

Note:Datetimepicker component should always be placed within a relatively positioned container.

Step 4: Add JavaScript in <script> tag

Add the following JavaScript in <script> tag after the <body> tag to specify ‘HH:mm:ss’ format to DateTimePicker.

      $(function() {
            $('#datetimepicker1').datetimepicker();
        });

Note: Custom format can be specified as per the requirement

Example.

Let’s look at the following example to understand how it basically works:

<html>

<head>
    <title>Bootstrap date and time</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
    <script>
        $(function() {
            $('#datetimepicker1').datetimepicker();
        });
    </script>

    <style>
        .container {
            margin-top: 5px;
            margin-left: 10px;
            width: 600px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class='col-sm-6'>
                <div class="form-group">
                    <div class='input-group date' id='datetimepicker1'>
                        <input type='text' class="form-control" />
                        <span class="input-group-addon">  
            <span class ="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

In the above code, we have used .datetimepicker class to datetimepicker in bootstrap

Check the output of the above code example.

Bootstrap, Datetimepicker

Bootstrap, Datetimepicker

All the best 👍