CODEWITHSUNDEEP
c#jqueryasp.net
dpreznik
dpreznik

Reputation: 247

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_ctl05_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.

Upvotes: 0

Views: 763

Answers (1)

lnmx
lnmx

Reputation: 11154

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.

Upvotes: 1

Related Questions