Hiii I have created below sample code of bootstrap datepicker in aspnet inside of update panel with autopostback trueOn pageload it selects date but after that date does not changes lthtml xmlns34httpwwww3org1999xhtml34gtlthead runat34server34gt lttitlegtlttitlegt ltscript src34jsjquery191jqueryminjs34gtltscriptgt ltscript src34jsbootstrapminjs34gtltscriptgt ltlink href34cssbootstrapmincss

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

Waghmare

SOLVED CLOSED ACTIVE ANSWERED
User: Waghmare
Posted: on Dec 10, 2017 10:35 PM
Forum: Bootstrap
Answer: 1
Views: 29359

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)
    {

    }

Download FREE API for Word, Excel and PDF in ASP.Net

kalpesh

0 2

Reply
ANSWER
User: kalpesh
Replied: on Dec 11, 2017 04:54 AM
Modified: on Dec 11, 2017 05:19 AM
Report

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

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

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

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

Company

Explore

Follow us

Contact Us