In this article I will provide solution to a problem where the selected value of the jQuery DatePicker TextBox is lost after PostBack in ASP.Net using C# and VB.Net.
The TextBox used along with the jQuery DatePicker is set as ReadOnly and hence it does not retain the value set on Client Side using jQuery DatePicker.
HTML Markup
The following HTML Markup consists of an ASP.Net ReadOnly TextBox and a Button. The TextBox has been applied with the jQuery DatePicker plugin.
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css"
rel="Stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("[id$=txtDate]").datepicker({
showOn: 'button',
buttonImageOnly: true,
buttonImage: 'calendar.png'
});
});
</script>
Select Date:
<asp:TextBox ID="txtDate" runat="server" ReadOnly = "true" />
<hr />
<asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Submit" />
Retain jQuery DatePicker TextBox selected value after PostBack in ASP.Net
Inside the Button click handler, the value of the Date TextBox is fetched from the Request.Form collection using the UniqueID of the TextBox.
Note: This is done because when TextBox is set to ReadOnly, the Text property does not hold the value set using Client Side script such as jQuery.
Finally the fetched value is assigned back to the TextBox which ultimately retains the selected date across PostBack.
C#
protected void Submit(object sender, EventArgs e)
{
string dt = Request.Form[txtDate.UniqueID];
txtDate.Text = dt;
}
VB.Net
Protected Sub Submit(sender As Object, e As System.EventArgs)
Dim dt As String = Request.Form(txtDate.UniqueID)
txtDate.Text = dt
End Sub
Screenshots
![[Solved] jQuery DatePicker TextBox selected value Lost after PostBack in ASP.Net]()
Demo
Downloads
