GridView中使用 jQuery DatePicker （UpdatePanel）

 

1.無UpdatePanel

 

1.代碼

<script>
    $(function () {
        $('.myDatePickerClass').datepicker({ dateFormat: 'yy-mm-dd' });
    }); 
</script>
 
<asp:TemplateField HeaderText="UpdateETD2" SortExpression="UpdateETD">
    <EditItemTemplate>
        <asp:TextBox ID="TextBoxDate" runat="server" Text='<%# Eval("UpdateETD") %>' CssClass='myDatePickerClass'></asp:TextBox>
    </EditItemTemplate>
    <ItemTemplate><%# Eval("UpdateETD") %></ItemTemplate>
</asp:TemplateField>  

2.疑問

不知道爲什麼此處只能使用class來選到TextBoxDate

2.有UpdatePanel

 

1.代碼

 

<script>
   // if you use jQuery, you can load them when dom is read.
   $(document).ready(function () {
       var prm = Sys.WebForms.PageRequestManager.getInstance();    
       prm.add_initializeRequest(InitializeRequest);
       prm.add_endRequest(EndRequest);
       // Place here the first init of the DatePicker
       $(".myDatePickerClass").datepicker();
    });        
    function InitializeRequest(sender, args) {
       // make unbind to avoid memory leaks.
       $(".myDatePickerClass").unbind();
    }
    function EndRequest(sender, args) {
       // after update occur on UpdatePanel re-init the DatePicker
       $(".myDatePickerClass").datepicker();
    }
</script>
 
<asp:TemplateField HeaderText="UpdateETD2" SortExpression="UpdateETD">
    <EditItemTemplate>
        
        <asp:TextBox ID="TextBoxDate" runat="server" Text='<%# Eval("UpdateETD") %>' CssClass='myDatePickerClass'></asp:TextBox>
    </EditItemTemplate>
    <ItemTemplate><%# Eval("UpdateETD") %></ItemTemplate>
</asp:TemplateField>  

 後臺讀取該TextBox數據

 

 ((TextBox)(GridView.Rows[e.RowIndex].Cells[10].Controls[0].FindControl("TextBoxDate"))).Text.ToString()

 

 

2.說明

參考：http://stackoverflow.com/questions/3341623/asp-net-updatepanel-in-gridview-jquery-datepicker

MSDN：https://msdn.microsoft.com/zh-cn/library/bb311028.aspx

 

來自爲知筆記(Wiz)