Adding the Dependencies
Note: Bootstrap, jQuery and Time Picker plugin are included in the downloadable of this tutorial.
First, we need to include the CSS and JS depencies to our app.
For CSS
Place the below codes in the header section of the page you want the timepicker to appear.
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/timepicker.css">
For JS
Place the below codes in either the header or before closing body section of the page you want the timepicker to appear.
Creating our Input
Next, we create the input where we want the timepicker to appear.
<div class="bootstrap-timepicker">
<div class="input-group input-group-lg">
<input type="text" class="form-control timepicker">
<div class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
Initializing our Timepicker
Lastly, we initialize our timepicker using jQuery.
$(function(){
$('.timepicker').timepicker({
showInputs: false
})
});
Full HTML
Here's the full html that you can use.
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/timepicker.css">
<h1 class="page-header text-center">Add Bootstrap Time Picker
</h1>
<div class="col-sm-4 col-sm-offset-4">
<div class="bootstrap-timepicker">
<div class="input-group input-group-lg">
<input type="text" class="form-control timepicker">
<div class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
$(function(){
$('.timepicker').timepicker({
showInputs: false
})
});
That ends this tutorial. Happy Coding :)