使用jQuery UI的日期选择器内的UpdatePanel [英] Using JQuery UI datepicker inside UpdatePanel

问题描述

我试图用UpdatePanel控件和jQuery UI的日期选择器。但是，如果日期选取器控件（文本框）里面的UpdatePanel的的ContentTemplate，然后日期选取器不工作。

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.

下面是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>

有没有办法使用jQuery UI的日期选择器的UpdatePanel里面的内容？

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

推荐答案

<打击> 然后，你把你的控件到面板，就可以改变他们唯一的ID。 试试这个为你的code：

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

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

或将code到

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

也有一个空间到你的选择：

Also there is a space into your selector:

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

来代替：

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

然后，使用的UpdatePanel和AJAX工具包，你应该在

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

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

有在在UpdatePanel的控制，并在

for the controls in the UpdatePanel, and during

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

有关在UpdatePanel外jQuery的控制。

for jquery controls outside the UpdatePanel.

这篇关于使用jQuery UI的日期选择器内的UpdatePanel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！