Gridview Jquery DatePicker 中的 Asp.Net UpdatePanel

Question

<asp:UpdatePanel ID="asd" runat="server">
    <ContentTemplate>
    <asp:GridView ID="gvUpdate" runat="server">
    <Columns>
    <asp:TemplateField HeaderText="DATE">
    <ItemTemplate>
    <asp:Label ID="lblDate" runat="server" Text='<%# Eval("DATE","{0:dd.MM.yyyy}")%>'></asp:Label>
    </ItemTemplate>
    <EditItemTemplate>
    <asp:TextBox ID="txtDate" runat="server" Text='<%# Eval("DATE","{0:dd.MM.yyyy}") %>'></asp:TextBox>
    </EditItemTemplate>
    </asp:TemplateField>
    </Columns>
    </ContentTemplate>

我想要 jquery datepicker 的“txtDate”如何制作？

谢谢...

Answer 1

最简单的方法是在日期文本框中放置一个类，然后使用 jQuery 添加日期选择器...

<EditItemTemplate>
<asp:TextBox ID="txtDate" CssClass="clDate" 
  runat="server" Text='<%# Eval("DATE","{0:dd.MM.yyyy}") %>'></asp:TextBox>
</EditItemTemplate>

而初始化的 javascript 是： $(".clDate").datepicker();< /code> 但更新面板在更新后需要再次初始化，所以最终的代码将是：

<script type="text/javascript"> 
   // 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
       $(".clDate").datepicker();
    });        

    function InitializeRequest(sender, args) {
       // make unbind to avoid memory leaks.
       $(".clDate").unbind();
    }

    function EndRequest(sender, args) {
       // after update occur on UpdatePanel re-init the DatePicker
       $(".clDate").datepicker();
    }
</script> 

Update:About the Sys. -> http://msdn.microsoft.com/en-us/library/bb311028.aspx