Date Picker Problem

I started using Date Picker, and liked it very much. But now I am facing a problem with it. I have an ASP.Net application. I have a Master Page, and a Default.aspx page, and several user controls (.ascx pages). In one of those user controls, I have a GridView with textboxes containing dates. Those textboxes use datepickers. The GridView is in an UpdatePanel. I use custom paging for the GridView. When e.g. I need to go to the next page, that UpdatePanel is updated. The problem is that when I go from the initial page to another page, the date pickers disappear. Here is my code: At the bottom of the master page:

<script type="text/javascript"> 
$(document).ready(function() {
    $("input.date").datepicker({ 
        showButtonPanel: true, 
        dateFormat: 'mm/dd/y', 
        changeYear: true, 
        closeText: 'X' 
    });
});
</script>

In the GridView:

<asp:TextBox ID="txtWFHCDate" runat="server" Text='<%#Eval("StrHCDate") %>' BorderStyle="None" Width="80%" CssClass="date" ></asp:TextBox> 

The html generated for the initial GridView page:

<input id="ctl00_CPHDefault_tcTPS_TPProd_ctl01_tcProduction_TPWorkflow_WorkflowGridView_ctl0开发者_如何学C5_txtWFHCDate" class="date hasDatepicker" type="text" style="border-style:None;width:80%;" value="10/18/11" name="ctl00$CPHDefault$tcTPS$TPProd$ctl01$tcProduction$TPWorkflow$WorkflowGridView$ctl05$txtWFHCDate">

The html generated after changing GridView page:

<input id="ctl00_CPHDefault_tcTPS_TPProd_ctl01_tcProduction_TPWorkflow_WorkflowGridView_ctl05_txtWFHCDate" class="date" type="text" style="border-style:None;width:80%;" value="10/18/11" name="ctl00$CPHDefault$tcTPS$TPProd$ctl01$tcProduction$TPWorkflow$WorkflowGridView$ctl05$txtWFHCDate">

I tried to move the script from Master Page to the Default.aspx page, and to .ascx page, but nothing helps.

Could you please help? Thanks.

During page load, your ready() function calls datepicker() to add the necessary bindings to your text inputs. When you change "pages" inside your GridView/UpdatePanel, those text inputs are discarded and replaced with new ones.

After the UpdatePanel loads the next "page", you need to call datepicker() again to re-bind the text inputs. You might be able to integrate this into the .ascx control, or use the UpdatePanel callback described here.