In this article I will explain with an example, how to use and implement Bootstrap TimePicker plugin in ASP.Net Web Forms with C# and VB.Net.
The Bootstrap TimePicker plugin will be applied to the ASP.Net TextBox using jQuery and then the TextBox will be converted into a TimePicker.
Bootstrap TimePicker Plugin
This article makes use of the following Bootstrap TimePicker plugin.
HTML Markup
The following HTML Markup consists of an ASP.Net TextBox which will later applied with the Bootstrap TimePicker plugin and an ASP.Net Button which has been assigned with an OnClick event handler.
<div class="form-group" style="margin: 30px">
<div class='input-group date' style="width: 200px">
<asp:TextBox ID="txtTime" runat="server" CssClass="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
</div>
<br />
<asp:Button ID="btnSubmit" Text="Submit" runat="server" OnClick="Submit" />
</div>
Applying the Bootstrap TimePicker to TextBox
Initially, the necessary files such as Bootstrap JS and CSS files, Moment.js library (required by the plugin) and the JS and CSS files of the Bootstrap TimePicker plugin are inherited.
Then inside the jQuery document ready event handler, the TextBox is applied with the Bootstrap TimePicker plugin.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/master/src/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript">
$(function () {
$('[id*=txtTime]').datetimepicker({
format: 'LT'
});
});
</script>
Fetching the value of selected Time on Server Side
When the Submit Button is clicked, the value of the selected Time is fetched from the Request.Form collection and is converted into DateTime object.
C#
protected void Submit(object sender, EventArgs e)
{
DateTime time = DateTime.Parse(Request.Form[txtTime.UniqueID]);
}
VB.Net
Protected Sub Submit(sender As Object, e As System.EventArgs) Handles btnSubmit.Click
Dim time As DateTime = DateTime.Parse(Request.Form(txtTime.UniqueID))
End Sub
Screenshots
The Bootstrap TimePicker
![Bootstrap TimePicker in ASP.Net with C# and VB.Net]()
Selected Time on Server Side
![Bootstrap TimePicker in ASP.Net with C# and VB.Net]()
Downloads
