jQuery的日期选择器不工作里面的GridView更新面板

Question

我想在日历上点击gridview项目模板上显示日历。为此我使用jquery日期选择器。但jquery日期选择器工作正常，如果gridview不是更新panel.But作为Gridview是更新面板里面，Jquery日期选择器不工作。请建议。

<script src="/scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
<script src="/scripts/jquery.dynDateTime.min.js" 
type="text/javascript"></script> 
<script src="/scripts/calendar-en.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
var $jq141 = $.noConflict(true); 
</script> 
<script type="text/javascript"> 
$jq141(document).ready(function() { 
    $jq141(".Calender").dynDateTime({ 
     showsTime: true, 
     ifFormat: "%d-%b-%Y ", 
     daFormat: "%l;%M %p, %e %m, %Y", 
     align: "BR", 
     electric: false, 
     singleClick: false, 
     displayArea: ".siblings('.dtcDisplayArea')", 
     button: ".next()" 
    }); 
}); 

<asp:UpdatePanel ID="UPUpdate" runat="server"> 
         <ContentTemplate> 
          <asp:GridView ID="Gridview1" runat="server" AutoGenerateColumns="false" Width="100%" 
           CssClass="grid-view" OnRowDataBound="OnRowDataBound"> 
           <AlternatingRowStyle CssClass="alternate" /> 
           <RowStyle CssClass="normal" /> 
           <HeaderStyle CssClass="header" /> 
           <Columns> 


            <asp:TemplateField HeaderText="DOB" ItemStyle-Width="15%"> 
             <ItemTemplate> 
              <asp:TextBox ID="txtDOB" Text='<%# Eval("DOB", "{0:dd-MMM-yyyy}")%>' 
               runat="server" Width="80px" class="Calender"></asp:TextBox> 
              <img src="/_layouts/images/ITEVENT.PNG" /> 
             </ItemTemplate> 
            </asp:TemplateField> 

          </asp:GridView> 
          <div id="Div1" style="padding: 2px; float: right" runat="server"> 
           <asp:Button ID="btnSave" runat="server" Text="Save" align="right" OnClick="btnSave_Click" /> 
           <input type="button" class="btnClose" value="Cancel" id="btnclose" /> 
           <asp:Button ID="btnRefesh" runat="server" Text="RefeshSPDRDD" OnClick="btnRefesh_Click" 
            Visible="false" /> 
          </div> 
         </ContentTemplate> 
         <Triggers> 
          <asp:AsyncPostBackTrigger ControlID="btnSave" /> 
          <asp:AsyncPostBackTrigger ControlID="btnRefesh" /> 
         </Triggers> 
        </asp:UpdatePanel> 

Answer 1

尝试这个

<script type="text/javascript"> 
     $(function() { 
      $("[id$=txtDOB]").datepicker({ 
       showOn: 'button', 
       buttonImageOnly: true, 
       buttonImage: 'http://jqueryui.com/demos/datepicker/images/calendar.gif' 
      }); 
     }); 
    </script> 

• OR

  $jq141(document).ready(function() { $jq141("[id$=txtDOB]").dynDateTime({ showsTime: true, ifFormat: "%d-%b-%Y ", daFormat: "%l;%M %p, %e %m, %Y", align: "BR", electric: false, singleClick: false, displayArea: ".siblings('.dtcDisplayArea')", button: ".next()" }); });

您需要更改只是这样的：$jq141("[id$=txtDOB]").dynDateTime(...)

Answer 2

这解决了我的问题

<script type="text/javascript"> 
var $jq141 = $.noConflict(true); 

<script type="text/javascript"> 

function DocumentReadyCalenderMethods() { 

    $jq141(document).ready(function() { 
     $jq141(".Calender").dynDateTime({ 
      showsTime: true, 
      ifFormat: "%d-%b-%Y ", 
      daFormat: "%l;%M %p, %e %m, %Y", 
      align: "BR", 
      electric: false, 
      singleClick: true, 
      displayArea: ".siblings('.dtcDisplayArea')", 
      button: ".next()" 
      // autoClose: true 
     }); 
    }); 

} 


function pageLoad(sender, args) { 
    if (args.get_isPartialLoad()) { 
     DocumentReadyCalenderMethods(); 
    } 
}