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

Use `ScriptManager.RegisterClientScriptBlock()` and call the code which are inside `document.ready()` (wrap those into a function) — mshsayem, Jul 03 '15 at 08:06
possible duplicate of [DatePicker disappears after postback](http://stackoverflow.com/questions/7970412/datepicker-disappears-after-postback) — Litisqe Kumar, Jul 03 '15 at 08:07

score 0 · Answer 1 · answered Jul 03 '15 at 08:06

You need to initialize the date time picker every time it is recreated - i.e. 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.

score 0 · Accepted Answer · answered Jul 03 '15 at 08:14

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"
                    }); 
            }

        });

try to add this on pageload ScriptManager.GetCurrent(this).RegisterPostBackControl(this.yourbutton); — Litisqe Kumar, Jul 03 '15 at 08:23

Javascript datetimepicker not woking after postback in asp.net

2 Answers2