In this article I will explain with an example, how to implement
jQuery TimePicker plugin in ASP.Net using C# and VB.Net.
Download jQuery TimePicker Plugin
You will need to download the plugin files from the following location.
The complete documentation is available in the following link.
HTML Markup
The HTML Markup consists of:
TextBox – For applying
jQuery TimePicker plugin.
Button – For displaying selected time.
The Button has been assigned with an OnClick event handler.
jQuery TimePicker Plugin implementation
Inside the HTML, the following
jQuery TimePicker CSS script file is inherited.
1. jquery.timepicker.min.css
And then, the following
jQuery and
jQuery TimePicker JS script files are inherited.
1. jquery.min.js
2. jquery.timepicker.min.js
Inside the
jQuery document ready event handler, the ASP.Net TextBox has been applied with the
jQuery TimePicker plugin.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("[id*=txtTime]").timepicker();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox runat="server" ID="txtTime"></asp:TextBox>
<asp:Button runat="server" ID="btnSubmit" Text="Submit" OnClick="OnSubmit" />
</form>
</body>
</html>
Fetching 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.
Finally, the selected Time is displayed in JavaScript Alert Message Box using the RegisterClientScriptBlock method.
C#
protected void OnSubmit(object sender, EventArgs e)
{
DateTime dt = Convert.ToDateTime(Request.Form[txtTime.UniqueID]);
ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", "alert('Selected Time : " + dt.ToShortTimeString() + "')", true);
}
VB.Net
Protected Sub OnSubmit(ByVal sender As Object, ByVal e As EventArgs)
Dim dt As DateTime = Convert.ToDateTime(Request.Form(txtTime.UniqueID))
ClientScript.RegisterClientScriptBlock(Me.GetType(), "alert", "alert('Selected Time : " & dt.ToShortTimeString() & "')", True)
End Sub
Screenshot
![Implement jQuery TimePicker Plugin in ASP.Net]()
Demo
Downloads
