In this article I will explain with an example, how to implement jQuery UI DatePicker Calendar with ASP.Net TextBox.
This article will also illustrate how to get the selected Date of the jQuery UI DatePicker (Calendar) on Server Side (Code Behind) on Button click in ASP.Net using C# and VB.Net.
HTML Markup
The following HTML Markup consists of an ASP.Net TextBox and a Button. The ReadOnly property of the TextBox is set to True.
<asp:TextBox ID="txtDate" runat="server" ReadOnly = "true"></asp:TextBox>
<hr />
<asp:Button ID="btnSubmit" runat="server" Text="Submit"
onclick="btnSubmit_Click" />
Applying jQuery UI DatePicker Plugin to ASP.Net TextBox
Inside the jQuery document ready event handler, the jQuery UI DatePicker Plugin is applied to the ASP.Net TextBox and the default Date format is set to MM/dd/yyyy.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("[id*=txtDate]").datepicker({
showOn: 'button',
buttonImageOnly: true,
buttonImage: 'images/calendar.png'
});
});
</script>
Fetching the value of the Selected Date on Server Side
Inside the Button Click event handler, the value of the Selected Date is fetched from the Request.Form collection and it is displayed using JavaScript Alert Message Box.
Note: Request.Form collection is used as in some browsers the Text property does not hold the value set from Client Side when the TextBox is set as ReadOnly.
C#
protected void btnSubmit_Click(object sender, EventArgs e)
{
string dt = Request.Form[txtDate.UniqueID];
ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Selected Date: " + dt + "');", true);
}
VB.Net
Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As EventArgs)
Dim dt As String = Request.Form(txtDate.UniqueID)
ClientScript.RegisterStartupScript(Me.GetType(), "alert", "alert('Selected Date: " & dt & "');", True)
End Sub
Screenshot
![jQuery UI DatePicker (Calendar) Example in ASP.Net]()
Demo
Downloads
