In this article, we will see how to add a bootstrap 5 timepicker. Here, we will learn how to use timepicker using bootstrap and jquery. we are using the timepicker() function to display timepicker.
Timepickers in jQueryUI allow users to select time easily and visually. You can customize the time format. You can select hours, minutes, and seconds through timepicker.
So, let's see how to use bootstrap 5 timepicker, timepicker bootstrap 4/5, how to add timepicker in bootstrap 5, bootstrap timepicker jquery, and bootstrap 5 timepicker js.
The HTML provides the default input type time.
Example:
<!DOCTYPE html>
<html>
<body>
<style>
body{
margin:80px;
}
</style>
<h2>How To Add Bootstrap 5 Timepicker - Techsolutionstuff</h2>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</body>
</html>
Output:
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<title>How To Add Bootstrap 5 Timepicker - Techsolutionstuff</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="form-group col-md-6">
<label for="time">Time</label>
<div class="input-group date" id="timePicker">
<input type="text" class="form-control timePicker">
<span class="input-group-addon"><i class="fa fa-clock-o" aria-hidden="true"></i></span>
</div>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script>
var firstOpen = true;
var time;
$('#timePicker').datetimepicker({
useCurrent: false,
format: "hh:mm A"
}).on('dp.show', function() {
if(firstOpen) {
time = moment().startOf('day');
firstOpen = false;
} else {
time = "01:00 PM"
}
$(this).data('DateTimePicker').date(time);
});
</script>
</html>
Output:
You might also like:
Top comments (0)