Bootstrap Datepicker
Bootstrap Datepicker is used to display a calendar with date, month, and time.
You can use the below code to create a datepicker in Bootstrap.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Bootstrap DatePicker</title>
</head>
<body>
<h1 align = "center">Bootstrap datepicker</h1>
<div class = "container">
<div class = "row">
<div class = "col-sm-12" align = "center">
<input type = "date" name = "date">
</div>
</div>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src ="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html> Bootstrap Timepicker
Bootstrap timepicker is used to display the time in minutes or seconds.
Example:
<html>
<head>
<title>Bootstrap date and time</title>
<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>
<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">
<style>
.container {
margin-top : 5px;
margin-left : 10px;
width : 600px;
}
</style>
</head>
<body>
</br>
<div class ="container">
<div class ="row">
<div class ='col-sm-6'>
<div class ="form-group">
<div class = 'input-group date' id='datetimepicker3'>
<input type = 'text' class="form-control" />
<span class = "input-group-addon">
<span class = "glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<script type = "text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'LT'
});
});
</script>
</div>
</div>
</body>
</html> Bootstrap datetime picker
Bootstrap Datetime picker is an input field that is used to display a calendar with the time.
In Bootstrap, there are the following two methods to display datetime picker –
Method 1: Without using calendar and time icon
You can follow the below code to display date and time without using the date and time icon.
<html>
<head>
<title>Bootstrap date and time</title>
<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>
<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">
<style>
.container {
margin-top: 5px;
margin-left: 10px;
width: 600px;
}
</style>
</head>
<body>
<div class = "container">
<div class = "row">
<div class = 'col-sm-6'>
<input type = 'text' class = "form-control" id = 'datetimepicker1' />
</div>
<script type = "text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker();
});
</script>
</div>
</div>
</body>
</html Method 2: Using date and time icon
Adding icons makes your picker more attractive and beautiful. You can use the below code to add date and time icon on your picker.
Code:
<html>
<head>
<title>Bootstrap date and time</title>
<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>
<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">
<style>
.container {
margin-top: 5px;
margin-left: 10px;
width: 600px;
}
</style>
</head>
<body>
</br>
<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>
Leave a Reply