In this article I will explain with an example, how to implement Bootstrap TimePicker plugin in ASP.Net Web Forms with C# and VB.Net.
Download Bootstrap TimePicker Plugin
You will need to download the plugin files from the following location.
HTML Markup
The following HTML Markup consists of an ASP.Net TextBox and an ASP.Net Button Control.
The TextBox has been assigned Bootstrap class and is associated with an HTML SPAN element which displays the FontAwesome Glyphicon Time icon.
The Button 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 Bootstrap TimePicker Plugin
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.js
3. bootstrap.min.js
4. bootstrap-datetimepicker.min.js
Inside the jQuery document ready event handler, the TextBox has been applied with the Bootstrap TimePicker plugin.
<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 type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$('[id*=txtTime]').datetimepicker({
format: 'LT'
});
});
</script>
Fetching the value of selected Time on Server Side
Inside the Button Click event handler, the value of the selected Time is fetched from the Request.Form collection and is converted into DateTime object.
Finally, the selected Time is displayed using JavaScript Alert Message Box.
C#
protected void Submit(object sender, EventArgs e)
{
DateTime time = DateTime.Parse(Request.Form[txtTime.UniqueID]);
ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", "alert('Selected Time: " + time.ToShortTimeString() + "')", true);
}
VB.Net
Protected Sub Submit(ByVal sender As Object, ByVal e As EventArgs)
Dim time As DateTime = DateTime.Parse(Request.Form(txtTime.UniqueID))
ClientScript.RegisterClientScriptBlock(Me.GetType(), "alert", "alert('Selected Time: " & time.ToShortTimeString() & "')", True)
End Sub
Screenshot
![Bootstrap TimePicker in ASP.Net with C# and VB.Net]()
Demo
Downloads
