I'm using this datepicker on my project (http://keith-wood.name/datepick.html)
I use it on an asp:TextBox control and problem is that the control loses the AutopostBack capability.
What I wish to achieve is update a gridview linked to the selected date, and before using this specific datepicker it was working (but I had to change the datepicker for various reasons).
If I change date or select a user from the dropdown it should update the gridview.
Relevant pieces of my code:
<script language="javascript" type="text/javascript">
$(document).ready(function () { $('#txtData').datepick({ dateFormat: 'dd/mm/yyyy'});
</script>
THE FOLLOWING IS INSIDE UPDATE PANEL, A SCRIPT MANAGER IS DECLARED ON THE PAGE
<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 < 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>
</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>
The postback is probably not firing because the control does not know the content has changed and it is the change event that will cause the control to do a postback.
I havent examined the plugin fully but in jQuery ui datepicker I use the onslect command to do a callback and trigger change event manually:
$('.calendarTxt').datepick({
onSelect: function (dateText) {
$(this).trigger('change');
}
});
EXAMPLE
$(document).ready(function () { $('#txtData').datepick({
dateFormat: 'dd/mm/yyyy',
onSelect: function (dateText) {
$(this).trigger('change');
}
});
Lastly if you use the css class instead of the id you can trigger this code from a master script page. This means you don't need to put the code on every date input control you just need to add the class.