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

    }
This question does not have replies that have been liked.