ASP.NET textbox with jQuery UI DatePicker value lost when doing a postback

I've got an application that uses jQuery UI DatePicker on an ASP.NET textbox control.

The control is working as intended, but I've noticed that when you postback from a server call (via submit button), the entered value gets lost in the application.

Was wondering if you all have experien开发者_运维技巧ced this? What measures that you have to do to prevent this?

<asp:TextBox runat="server" ID="txtCallsMadeFrom" class="field" EnableViewState="true">

var callsMadeFromId = '#<%=txtCallsMadeFrom.ClientID %>';
jQuery(callsMadeFromId).datepicker({ showOn: "button", buttonImage: "../images/calendar.gif", altFormat: 'dd/mm/yy', buttonImageOnly: true, onSelect: function () { } });

I faced this issue as well and even after trying to set view state on page or for control it did not workout. The approach to use a hidden field required to me manage sync between date field and the hidden field as the user was playing with the dates. So I decided to set the date again on document.ready as given in the post here, hope this helps.

http://www.himanshusaxena.net/asp-net-text-box-with-jquery-ui-date-picker-value-lost-on-a-post-back/

You could consider saving the Textbox's value in a hidden field. I do that with Jquery tabcontrols as they also forget which tab is selected during a postback.

Make sure that you haven't put <%@ Page EnableViewState="false"%> in .. if you have done so you can still turn on the view state of individual control by <asp:TextBox runat="server" ID="txtCallsMadeFrom" class="field" ViewStateMode="Enabled">

With this solution you dont need any jQuery trick. You have to Remember to ALWAYS send the date to the TextBox in MM/DD/YYYY format in every single postback, dont matter if you work in DD/MM/YYYY.

Solution:

in ASPX:

<script type="text/javascript">
$(function () {
    $("#txtFechaIni").datepicker();
    $('#txtFechaIni').datepicker('option', { dateFormat: 'dd/mm/yy' });            
});
</script>
<asp:TextBox ID="txtFechaIni" runat="server" MaxLength="10"></asp:TextBox>

In codebehind (C#) use the Page_LoadComplete event to transform the date to MM/DD/YYYY in every postback. I use this event because is the last thing that is executed before the Page_Unload and you dont have to transform the date in every event:

protected void Page_LoadComplete(object sender, EventArgs e)
{
    if (txtFechaIni.Text.Length == 10)
    {
        //Transform DD/MM/YYYY to MM/DD/YYYY.
        txtFechaIni.Text = txtFechaIni.Text .Substring(3, 2) + "/" + txtFechaIni.Text .Substring(0, 2) + "/" + txtFechaIni.Text .Substring(6, 4)
    }
}

Hope it helps someone.

Here is what I've done. It works in or out of an update panel and retains the value on postback.

<script>
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(evt, args) {
    $("#<%= txtTime.ClientID %>").timepicker({timeformat: 'HH:mm' }); 
    $( "#<%= txtDatePicker.ClientID %>" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
});
</script>

Here is the partial XAML of my textboxes in the update panel.

<asp:UpdatePanel ID="UpdatePanel1" runat="server" style="margin-left: -4px" >
    <ContentTemplate>
    <table>
    <tr>
    //other controls.
    .
    .
    .
    <td><asp:TextBox ID="txtDatePicker" runat="server" Width="130px"></asp:TextBox></td>
    <td><asp:TextBox ID="txtTime" runat="server" Width="115" ></asp:TextBox></td>
    </tr>
    </table>
    </ContentTemplate>
</asp:UpdatePanel>

I hope this helps others!