[Solved] Bootstrap DatePicker not working after PostBack inside ASP.Net UpdatePanel

Last Reply one year ago By kalpesh

Posted one year ago

Hiii ,

 I have created below sample code of bootstrap datepicker in asp.net inside of update panel with autopostback true.

On pageload it selects date but after that date does not changes.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="js/jquery_1.9.1_jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <script src="js/bootstrap-datepicker.min.js"></script>
    <link href="css/bootstrap-datepicker.css" rel="stylesheet" />


    <script type="text/javascript">
        function pageLoad(sender, args) {
            var dateNow = new Date();
            $('#datepicker').datepicker("setDate", dateNow);
            minDate: new Date() // to disable privious dates 
        }
    </script>

    <style type="text/css">
        .table-condensed {
            width: 200px;
            height: 10px;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <br />
        <a href="DatePicker.aspx" target="_blank">DatePicker</a> || <a href="Dropdown_Search.aspx" target="_blank">Dropdown Search</a> || <a href="DateTimePicker.aspx" target="_blank">DateTime Picker</a>
        <br />
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <div class="row">
                        <div class="col-md-4">
                            <div id='datepicker' class="input-group date datepicker col-md-6" data-date="" data-link-field="dtp_input2"
                                style="max-width: 220px">
                                <asp:TextBox ID="txtBookDate" runat="server" CssClass="form-control" size="16" type="text" value="" AutoPostBack="true" OnTextChanged="txtBookDate_TextChanged" />
                                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>

 

protected void txtBookDate_TextChanged(object sender, EventArgs e)
    {

    }
Posted one year ago Modified on one year ago

All jQuery plugins are applied on the Page Load event of the HTML Page or in other words document ready event which is fired when the whole page or document is rendered completely in browser. Now jQuery assigns a unique identification to all controls when applying the plugin. But when some control is inside UpdatePanel and a Partial PostBack occurs the Unique Ids assigned by jQuery is lost and hence the plugin stops working.

For more Information refer the below article link for your reference.

jQuery DatePicker not working inside ASP.Net AJAX UpdatePanel Partial PostBack

Also refer the below modified Sample code for your reference and implement it as per your code logic.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.min.js"></script>
    <style type="text/css">
        .table-condensed
        {
            width: 200px;
            height: 10px;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <br />
    <br />
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <div class="row">
                    <div class="col-md-4">
                        <div id='datepicker' class="input-group date datepicker col-md-6" data-date="" data-link-field="dtp_input2"
                            style="max-width: 220px">
                            <asp:TextBox ID="txtBookDate" runat="server" CssClass="form-control" size="16" type="text"
                                value="" AutoPostBack="true" OnTextChanged="txtBookDate_TextChanged" />
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    <script type="text/javascript">
        //On Page Load.
        $(function () {
            SetDatePicker();
        });

        //On UpdatePanel Refresh.
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        if (prm != null) {
            prm.add_endRequest(function (sender, e) {
                if (sender._postBackSettings.panelsToUpdate != null) {
                    SetDatePicker();
                    $(".datepicker-orient-bottom").hide();
                }
            });
        };

        function SetDatePicker() {
            $("#datepicker").datepicker();
            if ($("#txtBookDate").val() == "") {
                var dateNow = new Date();
                $('#datepicker').datepicker("setDate", dateNow);
            }
        }
    </script>
    </form>
</body>
</html>

Screenshot