Uso de JQuery UI datepicker dentro de UpdatePanel

Question

Estoy tratando de usar el control UpdatePanel y Jquery UI para el selector de fecha. Pero si el control de selector de fecha (TextBox) está dentro de ContentPamplate de UpdatePanel, entonces el selector de fecha no funciona.

Aquí está el código:

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

¿Hay alguna manera de usar interfaz de usuario jQuery selector de fechas dentro de UpdatePanel contenido?

Answer 1

Luego, coloca los controles en los paneles, ellos pueden cambiar su identificación única. probar esto por su código:

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

o mover el código a la

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

También hay un espacio en su selector de:

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

en lugar de:

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

Luego, utilizando el kit de herramientas AJAX UpdatePanel y, se debe utilizar inicializadores durante

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

de los controles en el UpdatePanel, y durante

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

para los controles jquery fuera del UpdatePanel.