I am using JavaScript function
and i am using ajax update panel
when the page is post back JavaScript function is not working properly
My code is
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server"> <link rel="stylesheet" href='<%= Page.ResolveUrl("~/Styles/bootstrap-datetimepicker.min.css") %>'/> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:LinkButton ID="LinkbtnReset" runat="server" CssClass="btn btn-primary" onclick="LinkbtnReset_Click"> <span class="glyphicon glyphicon-refresh"></span> Reset </asp:LinkButton> <div class="form-group"> <label class="control-label col-md-2 col-xs-12 col-sm-3" for="confirmPassword">Ref No:</label> <div class="col-xs-12 col-md-2 col-sm-3"> <asp:TextBox ID="txtRefNo" CssClass="form-control" runat="server"></asp:TextBox> </div> <label class="control-label col-xs-12 col-md-1 col-sm-3" for="confirmPassword">Ref Date:</label> <div class="col-xs-12 col-md-2 col-sm-3"> <div class="input-group date form_date " data-date="" data-date-format="dd-M-yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd"> <asp:TextBox ID="txtRefDate" CssClass="form-control" runat="server"></asp:TextBox> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> </div> <input type="hidden" id="dtp_input2" value="" /> </div> </div> </ContentTemplate> </asp:UpdatePanel> <!-- Script for DatePicker --> <script type="text/javascript" src='<%= Page.ResolveUrl("~/Scripts/bootstrap-datetimepicker.js")%>' charset="UTF-8"></script> <script type="text/javascript"> $('.form_date').datetimepicker({ language: 'en', weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, minView: 2, forceParse: 0 }); </script> <!-- End Script for datepicker --> </asp:Content>
first time it is working fine
but when i click the Link button date picker is not working
i tried the following way but no use
protected void Page_PreInIt(object sender, EventArgs e) { string datescript; datescript = " <script type='text/javascript' src='../../Scripts/bootstrap-datetimepicker.js' charset='UTF-8'></script>"; datescript = datescript + ("<script> $('.form_date').datetimepicker({language: 'en',weekStart: 1,todayBtn: 1,autoclose: 1,todayHighlight: 1,startView: 2,minView: 2,forceParse: 0});</script>"); ClientScript.RegisterStartupScript(this.GetType(), "myScript", datescript, true); }
could anyone slove?
Thanks,
Murali.
Hi,
Try to add the datetimepicker from document ready event i.e.
$(document).ready(function(){ $('.form_date').datetimepicker({ language: 'en', weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, minView: 2, forceParse: 0 }); });
Hi Murali,
Thanks for your post.
murali krishna14
<script type="text/javascript"> $('.form_date').datetimepicker({ language: 'en', weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, minView: 2, forceParse: 0 }); </script>
Firstly, according to your code, are you sure that the datetimepicker works fine after the DOM has been initialized?
Besides, you could refer to the following code to execute your handler.
$(function () { $('.form_date').datetimepicker({ language: 'en', weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, minView: 2, forceParse: 0 }); })
Here is some example about Bootstrap datetimepicker, you could refer to it.
Best Regards,
Fei Han