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.

• http://eonasdan.github.io/bootstrap-datetimepicker/

Best Regards,

Fei Han