在 UpdatePanel 中使用 JQuery UI datepicker [重复]

Posted 2023-05-08

【中文标题】在 UpdatePanel 中使用 JQuery UI datepicker [重复]

【英文标题】：Using JQuery UI datepicker inside UpdatePanel [duplicate]

【发布时间】：2011-08-29 16:27:24

【问题描述】：

我正在尝试将 UpdatePanel 控件和 Jquery UI 用于日期选择器。但如果日期选择器控件（TextBox）在 UpdatePanel 的 ContentTemplate 中，则日期选择器不起作用。

代码如下：

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

有没有办法在 UpdatePanel 内容中使用 JQuery UI 日期选择器？

【问题讨论】：

您是否使用 .net 4 并将 clientIDMode 设置为静态？如果不是，#txtDatePicker not 将成为页面呈现时文本框的 id...

是的，我使用的是 .net 4，TextBox 的 ClientIDMode 设置为 Static。

【参考方案1】：

然后您将控件放入面板中，它们可以更改它们的唯一 ID。 试试这个代码：

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

或将您的代码移至

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

您的选择器中还有一个空格：

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

代替：

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

然后使用 UpdatePanel 和 AJAX 工具包，您应该在使用初始化程序期间

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

对于 UpdatePanel 中的控件，以及在此期间

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

用于 UpdatePanel 之外的 jquery 控件。

【讨论】：

两种方法我都试过了，但问题没有解决。

更新了代码——关于pageLoad函数