Jquery 日期选择器在日期更改时不执行回发

Question

我在我的项目中使用这个日期选择器（http://keith-wood.name/datepick.html）

我在

asp:TextBox

控件上使用它，问题是该控件失去了 AutopostBack 功能。

我希望实现的是更新链接到所选日期的网格视图，并且在使用这个特定的日期选择器之前它正在工作（但由于各种原因我不得不更改日期选择器）。

如果我更改日期或从下拉列表中选择用户，它应该更新网格视图。

我的代码的相关部分：

<script language="javascript" type="text/javascript">
    $(document).ready(function () { $('#txtData').datepick({ dateFormat: 'dd/mm/yyyy'});
</script>

以下是更新面板内，页面上声明了脚本管理器

<div class="generic">
   <div class="panel">
      <div class="title">
         <h1>Chiamate del giorno</h1>
      </div>
      <div >
         <asp:TextBox runat="server" ID="txtData" CssClass="calendarTxt" placeholder="Data" BorderStyle="Solid" BorderColor="#d13f31" BorderWidth="2px" required="required" AutoPostBack="true"></asp:TextBox>
         <asp:DropDownList ID="ddlUtenti" runat="server" AppendDataBoundItems="true" CssClass="dropdown" placeholder="Scegli a chi riassegnare la chiamata" AutoPostBack="true" OnSelectedIndexChanged="ddlUtenti_SelectedIndexChanged">
            <asp:ListItem Value="-1">Tutti</asp:ListItem>
         </asp:DropDownList>
      </div>
      <br />
      <div class="content">
         <div id="divChiamateGiorno" class="scrollDiv" >
            <asp:GridView ID="grdChiamateGiorno" runat="server" AutoGenerateColumns="False" DataKeyNames="idchia,dalle,alle,idstato" DataSourceID="SqlDataSource1" AllowSorting="True" CssClass="tablestyle"  >
               <AlternatingRowStyle BackColor="WhiteSmoke" CssClass="altrowstyle"/>
               <FooterStyle BackColor="#CCCC99" ForeColor="Black" />
               <HeaderStyle Font-Bold="True" BackColor="LightGray" HorizontalAlign="Center" VerticalAlign="Middle" Height="30px"  CssClass="headerstyle" />
               <RowStyle CssClass="rowstyle" />
               <Columns>
                  <asp:BoundField DataField="tecnico" HeaderText="Tecnico" SortExpression="tecnico" />
                  <asp:BoundField DataField="ragsoc" HeaderText="Cliente" SortExpression="ragsoc" ItemStyle-Width="30%" />
                  <asp:BoundField DataField="rdescr" HeaderText="Richiesta" SortExpression="rdescr" ItemStyle-Width="50%" />
                  <asp:BoundField DataField="prior" HeaderText="Priorità" SortExpression="prior" ItemStyle-HorizontalAlign="Center" >
                     <ItemStyle HorizontalAlign="Center" />
                  </asp:BoundField>
                  <asp:BoundField DataField="app" HeaderText="Appuntamento" SortExpression="app" ItemStyle-HorizontalAlign="Center" >
                     <ItemStyle HorizontalAlign="Center" />
                  </asp:BoundField>
                  <asp:BoundField DataField="assremota" HeaderText="Remoto" SortExpression="assremota" ItemStyle-HorizontalAlign="Center"  >
                     <ItemStyle HorizontalAlign="Center" />
                  </asp:BoundField>
                  <asp:BoundField DataField="idchia" HeaderText="idchia" InsertVisible="False" ReadOnly="True" SortExpression="idchia" Visible="false" />
                  <asp:BoundField DataField="tipo" HeaderText="tipo" SortExpression="tipo" Visible="false" />
                  <asp:BoundField DataField="rforo" HeaderText="rforo" SortExpression="rforo" Visible="false" />
                  <asp:BoundField DataField="dalle" HeaderText="dalle" SortExpression="dalle" Visible="false" />
                  <asp:BoundField DataField="alle" HeaderText="alle" SortExpression="alle" visible="false"/>
                  <asp:BoundField DataField="idstato" HeaderText="idstato" SortExpression="idstato" visible="false"/>
                  <asp:TemplateField HeaderText="">
                     <ItemTemplate>
                        <div class="clearing"></div>
                        <div class="tooltip">
                           <i id="collapse3" runat="server" class="fa fa-caret-square-o-left fa-lg" aria-hidden="true"></i>
                           <span class="tooltiptext" id="litGestioneGiorn" runat="server"></span>
                        </div>
                     </ItemTemplate>
                  </asp:TemplateField>
               </Columns>
            </asp:GridView>
         </div>
         <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:dbVulcanoConnectionString %>" SelectCommand="select utenti.nome as tecnico, Richieste.IDRic as idchia, richieste.descr as rdescr, ISNULL(richieste.assistremota,0) as assremota, Clienti.RagSociale as ragsoc, richieste.descr as descr, richieste.priorita as prior, richieste.tipo as tipo, richieste.rforologio as rforo, ISNULL(statoric.appuntamento,0) as app, ISNULL(statoric.oradalle,0) as dalle, ISNULL(statoric.oraalle,0) as alle, statoric.ID as idstato from clienti inner join richieste on clienti.idcliente = richieste.rfcliente inner join statoric on statoric.rfric = richieste.idric inner join stati on stati.idstato = statoric.rfstato inner join utenti on utenti.idutente=statoric.rftecnico where statoric.attuale = 1 and statoric.rfstato &lt; 14 and statoric.dataass = @data and (@tecnico = -1 or statoric.rftecnico = @tecnico) order by app desc, oraalle asc, prior desc">
            <SelectParameters>
               <asp:ControlParameter ControlID="txtData" DefaultValue="17/01/2017" Name="data" PropertyName="Text" Type="DateTime" />
               <asp:ControlParameter ControlID="ddlUtenti" DefaultValue="0" Name="tecnico" PropertyName="SelectedValue" Type="Int32"  />
            </SelectParameters>
         </asp:SqlDataSource>
         <p>
            &nbsp;
         </p>
         <table border="0" cellspacing="0" cellpadding="0" style="width: 100%">
            <tr>
               <td></td>
               <td align="right">
                  <input runat="server" name="Stampa" type="button" class="gbutton" id="btnStampa" value="Stampa" onclick="printdiv('divChiamateGiorno');"  />
               </td>
            </tr>
         </table>
      </div>
   </div>
</div>

Answer 1

回发可能不会触发，因为控件不知道内容已更改，并且更改事件将导致控件执行回发。

我还没有完全检查该插件，但在 jQuery ui datepicker 中，我使用

onslect

命令来手动执行回调并触发更改事件：

  $('.calendarTxt').datepick({
    onSelect: function (dateText) {
      $(this).trigger('change');
    }
  });

示例

$(document).ready(function () { $('#txtData').datepick({ 
  dateFormat: 'dd/mm/yyyy',
  onSelect: function (dateText) {
    $(this).trigger('change');
  }
});

最后，如果您使用 css 类而不是 id，您可以从主脚本页面触发此代码。这意味着您不需要将代码放在每个日期输入控件上，您只需要添加类即可。