How to use datetimepicker in bootstrap?
May 03, 2022Hi 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.
All the best 👍