Using JQuery UI datepicker inside UpdatePanel [dup

Question

This question already has answers here:

jquery datepicker ms ajax updatepanel doesn't work after post back (9 answers)

Closed 7 years ago.

I'm trying to use UpdatePanel control and Jquery UI for date picker. But if date picker control (TextBox) is inside UpdatePanel's ContentTemplate, then date picker does not works.

Here is the code:

 <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jqueryui/js/jquery-ui-1.8.8.custom.min.js" type="text/javascript"></script>  

     <script language="javascript" type="text/javascript">

        $(function () {
            var dates = $(" #txtDatePicker").datepicker(
            {
                firstDay: 1,
                maxDate: '-1y',
                minDate: '-1y',
                dateFormat: 'dd/mm/yy',
                changeMonth: true,
                changeYear: true,
                showAnim: "drop",
                onSelect: function (selectedDate) {
                    var option = this.id == "txtDatePicker" ? "minDate" : "maxDate",
                    instance = $(this).data("datepicker");
                    date = $.datepicker.parseDate(
                        instance.settings.dateFormat ||
                        $.datepicker._defaults.dateFormat,
                        selectedDate, instance.settings);
                    dates.not(this).datepicker("option", option, date);
                }
            }
            );
        });

     </script>



   <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    <asp:TextBox ID="txtDatePicker" runat="server"></asp:TextBox>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnSomeButton" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>

Is there any way to use JQuery UI datepicker inside UpdatePanel content?

Answer 1

Then you put your controls into the panels, they can change they unique ID. try this for your code:

var dates = $("#<%= txtDatePicker.ClientID %>").datepicker( 

or move your code to the

$(document).ready(function() {
  // Handler for .ready() called.
});

Also there is a space into your selector:

var dates = $(" #txtDatePicker").datepicker(

instead of:

var dates = $("#txtDatePicker").datepicker(

Then using the UpdatePanel and AJAX toolkit, you should use initializers during

function pageLoad()
{ // MS AJAX - UpdatePanel initialize
  InitializeDatePicker();
}

for the controls in the UpdatePanel, and during

$(document).ready(function() { // jQuery
  AssignFrameHeight();
});

for jquery controls outside the UpdatePanel.