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 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts