Javascript datetimepicker not woking after postback in asp.net

Question

have a page that contains a user control within an update panel.

 <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> ---- ---- <div id="dtBox"></div> <script type="text/javascript"> $(document).ready(function () { $("#dtBox").DateTimePicker({ dateFormat: "yyyy-MM-dd", timeFormat: "hh:mm AA", dateTimeFormat: "yyyy-MM-dd hh:mm:ss AA" }); }); </script> <asp:TextBox ID="abc" data-field="date" data-view="Dropdown" data-format="MM-dd-yyyy" runat="server"></asp:TextBox> --- --- </ContentTemplate> </asp:UpdatePanel> 

$(document).ready(function() ) {} is called and executes the code correctly when the page firsts loads but if the user clicks a button (within the user control), the document.ready() doesn't get called. I'm using CuriousSolutions-DateTimePicker

Answer 1

You need to initialize the date time picker every time it is recreated - ie every time the post back happens and the update panel that wraps the date picker is refreshed.

Wrapping it in the document.ready means it will happen only once.

One easy way would be to move your initialization code to after the control without wrapping it in a $(document).ready. Or, the right way would be to listen for a post back complete javascript event and reinitialize the date picker.

Answer 2

Try this script hope it will work.

        $(document).ready(function() {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

            function EndRequestHandler(sender, args) {
                $("#dtBox").DateTimePicker({
                        dateFormat: "yyyy-MM-dd",
                        timeFormat: "hh:mm AA",
                        dateTimeFormat: "yyyy-MM-dd hh:mm:ss AA"
                    }); 
            }

        });