In this article I will explain with an example, how to use
Bootstrap TimePicker in
HTML.
Download Bootstrap TimePicker Plugin
You will need to download the plugin files from the following location.
HTML Markup
The following HTML Markup consists of:
The
HTML TextBox has been assigned
Bootstrap classes and is associated with an
HTML SPAN element which displays the
FontAwesome Glyphicon Time Icon.
Then it’s also consists of
HTML Input Button.
<div class="form-group" style="marg in:10px">
<div class="input-group">
<input id="txtTime" type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
<br />
<input id="btnSubmit" type="button" value="Submit" class="btn btn-primary" />
</div>
Bootstrap TimePicker Plugin implementation
Inside the HTML Markup, the following CSS files are inherited.
1. bootstrap.min.css
2. bootstrap-datetimepicker.min.css
And then, the following JS scripts are inherited.
1. jquery.min.js
2. moment-with-locales.min.js
3. bootstrap.min.js
4. bootstrap-datetimepicker.min.js
The
jQuery TimePicker plugin has been assigned with the following properties:
Also the
HTML Button has been assigned with
jQuery click event handler.
Inside the Button
click event handler, the value of the selected Time is displayed using
JavaScript Alert Message Box.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/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://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/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 type="text/javascript">
$(function () {
$('#txtTime').datetimepicker({
format:'LT'
});
$("#btnSubmit").on("click", function () {
alert("Selected Time: " + $("#txtTime").val());
});
});
</script>
Screenshot
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
