这个 jQuery 日期选择器代码有什么问题？答案

【问题标题】：Whats wrong with this jQuery Date picker code?这个 jQuery 日期选择器代码有什么问题？
【发布时间】：2011-12-06 15:46:50
【问题描述】：

我使用 jQuery 日期选择器已经有一段时间了，它很棒。但是，我现在在用户控件中使用它并且无法使其工作失败并出现错误：

创建日期选择器时对象不支持此属性或方法。

我的网站结构如下：

[Root]
  - [Pages]
     - MasterPage.Master
     - GoodsReceived.aspx
  - [WebControls]
     - [PageControls]
       - PopupBatchEntry.ascx

我已将 jQuery 添加到母版页，如下所示：

<link href="../App_Themes/Default/Style.css" rel="stylesheet" type="text/css" />
<link href="../JavaScripts/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="../JavaScripts/jquery.min.js" type="text/javascript"></script>
<script src="../JavaScripts/jquery-ui.min.js" type="text/javascript"></script>

我已经将 jQuery 添加到用户控件中，如下所示：

<script src="../../JavaScripts/jquery.min.js" type="text/javascript"></script>
<script src="../../JavaScripts/jquery-ui.min.js" type="text/javascript"></script>

我试图打开日期选择器的文本框位于 gridview 内的用户控件中（css 类：datePicker）

<asp:GridView ID="gvBatchDetails" runat="server" AutoGenerateColumns="False" EnableModelValidation="True">
                                    <Columns>

                                        <asp:TemplateField HeaderText="Use By">
                                            <EditItemTemplate>
                                                <asp:TextBox ID="txtUseBy" runat="server" Text='<%# Bind("UseBy", "{0:dd/MM/yyyy}") %>'
                                                    Width="80px" CssClass="datePicker"></asp:TextBox>
                                                <%--                                                <cc1:CalendarExtender ID="txtUseBy_CalendarExtender" runat="server" 
                                                    Enabled="True" Format="dd/MM/yyyy" TargetControlID="txtUseBy">
                                                </cc1:CalendarExtender>--%>
                                                <asp:RequiredFieldValidator ID="valSellByReq" runat="server" ControlToValidate="txtUseBy"
                                                    ErrorMessage="* Required" Display="Dynamic"></asp:RequiredFieldValidator>
                                            </EditItemTemplate>
                                            <ItemTemplate>
                                                <asp:Label ID="Label3" runat="server" Text='<%# Bind("UseBy", "{0:dd/MM/yyyy}") %>'></asp:Label>
                                            </ItemTemplate>
                                            <HeaderStyle HorizontalAlign="Left" />
                                            <ItemStyle HorizontalAlign="Left" />
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="Sell By">
                                            <EditItemTemplate>
                                                <asp:TextBox ID="txtSellBy" runat="server" Text='<%# Bind("SellBy", "{0:dd/MM/yyyy}") %>'
                                                    Width="80px" CssClass="datePicker"></asp:TextBox>
                                                <%--                                                <cc1:CalendarExtender ID="txtSellBy_CalendarExtender" runat="server" Enabled="True"
                                                    Format="dd/MM/yyyy" TargetControlID="txtSellBy">
                                                </cc1:CalendarExtender>--%>
                                                <asp:RequiredFieldValidator ID="valSellByRequired" runat="server" ControlToValidate="txtSellBy"
                                                    ErrorMessage="* Required" Display="Dynamic"></asp:RequiredFieldValidator>
                                            </EditItemTemplate>
                                            <ItemTemplate>
                                                <asp:Label ID="Label4" runat="server" Text='<%# Bind("SellBy", "{0:dd/MM/yyyy}") %>'></asp:Label>
                                            </ItemTemplate>
                                            <HeaderStyle HorizontalAlign="Left" />
                                            <ItemStyle HorizontalAlign="Left" />
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="Quantity Delivered">
                                            <EditItemTemplate>
                                                <asp:TextBox ID="txtQuantityDelivered" runat="server" Text='<%# Bind("QuantityDelivered") %>'
                                                    Width="75px"></asp:TextBox>
                                                <asp:RequiredFieldValidator ID="valQuantityRequired" runat="server" ControlToValidate="txtQuantityDelivered"
                                                    ErrorMessage="* Required" Display="Dynamic"></asp:RequiredFieldValidator>
                                                <asp:RangeValidator ID="valQuantityRange" runat="server" ControlToValidate="txtQuantityDelivered"
                                                    ErrorMessage="* Invalid" MinimumValue="0" Type="Double" CultureInvariantValues="True"
                                                    Display="Dynamic"></asp:RangeValidator>
                                            </EditItemTemplate>
                                            <ItemTemplate>
                                                <asp:Label ID="Label5" runat="server" Text='<%# Bind("QuantityDelivered") %>'></asp:Label>
                                            </ItemTemplate>
                                            <HeaderStyle HorizontalAlign="Right" />
                                            <ItemStyle HorizontalAlign="Right" />
                                        </asp:TemplateField>
                                        <asp:TemplateField ShowHeader="False">
                                            <EditItemTemplate>
                                                <table class="BorderlessTable">
                                                    <tr>
                                                        <td>
                                                            <asp:Button ID="Button1" runat="server" CausesValidation="True" CommandName="Update"
                                                                Text="Update" />
                                                        </td>
                                                        <td>
                                                            <asp:Button ID="Button2" runat="server" CausesValidation="False" CommandName="Cancel"
                                                                Text="Cancel" />
                                                        </td>
                                                    </tr>
                                                </table>
                                            </EditItemTemplate>
                                            <ItemTemplate>
                                                <table class="BorderlessTable">
                                                    <tr>
                                                        <td>
                                                            <asp:Button ID="Button1" runat="server" CausesValidation="False" CommandName="Edit"
                                                                Text="Edit" />
                                                        </td>
                                                        <td>
                                                            <asp:Button ID="Button2" runat="server" CausesValidation="False" CommandName="Delete"
                                                                Text="Delete" />
                                                        </td>
                                                    </tr>
                                                </table>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                    </Columns>
                                </asp:GridView>

最后是 jQuery im 用于将文本框转换为日期选择器（在用户控件中）：

//Configure dates when the page is loaded
$(document).ready(configureDates);

//Add handler toend request
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(configureDates);

//Configure all date picker text boxes
function configureDates() {

    var datePickers = $('.datePicker');

    if ($(datePickers).length > 0) {
        $(datePickers).datepicker({ dateFormat: "dd/mm/yy" });   <--- ERROR IS HERE
    }
}

谁能看出这有什么问题？我在想这可能与 jQuery 文件的路径有关，具体取决于当前上下文是在 pages 文件夹中，还是在 web controls 文件夹中。

【问题讨论】：

jQuery 完全有能力处理选择器不返回任何元素的情况——你自己这样做似乎不会给你带来任何好处，而且只会让你的代码复杂化。
@Anthony Grist - 谢谢，我补充说，因为我最初认为这是导致问题的原因（文本框在编辑模板中，并且在第一页加载时不存在）。感谢您的确认
老实说，我认为您最初认为这是 jQuery UI 导入的问题可能是正确的。那，或者出于任何原因，您的 jQuery UI .js 文件不包含 datePicker 代码。同一页面中是否还有其他代码使用从同一个 .js 文件导入的方法？
@AnthonyGrist - 刚刚在一个平面页面上用 jQuery 脚本测试了一个文本框，它可以工作，所以我很高兴 js 文件没有任何问题。现在将我的用户控件放在页面上，看看是否存在解决控件中 jquery 路径的问题
@AnthonyGrist - 好的，所以我已经在我的新平面页面上解决了这个问题，但我有一个新问题。日期选择器的 z-index 低于 ajax 控件工具包模态弹出扩展器，并且出现在后面。对我需要更改的课程有任何想法吗？

标签： jquery asp.net jquery-ui datepicker

【解决方案1】：

将ResolveUrl 用于您的脚本和css refs：

<link href='<%= Page.ResolveUrl("~/App_Themes/Default/Style.css")%>' rel="stylesheet" type="text/css" />
<link href='<%= Page.ResolveUrl("~/JavaScripts/jquery-ui.css")%>' rel="stylesheet" type="text/css" />
<script src='<%= Page.ResolveUrl("~/JavaScripts/jquery.min.js")%>' type="text/javascript"></script>
<script src='<%= Page.ResolveUrl("~/JavaScripts/jquery-ui.min.js")%>' type="text/javascript"></script>


//Configure all date picker text boxes
function configureDates() {

    $('.datePicker').datepicker("option", "dateFormat", "dd/mm/yy");

}

【讨论】：

嗨 rick，在主控还是用户控？ - 它们将解析不同的路径，并且在查看页面的源代码时，每个 js 文件只添加一个引用
你可以在任何地方添加它们，只要你使用ResolveUrl它们会自动解析，你可能必须使用Control.ResolveUrl。
您不需要多个引用，每页只需要一个，因此如果您在 MasterPage 中有它们，则在控件中不需要它们。
嗨 Rick，我已经厌倦了 page.resolveURL 但现在我在我的一个基本页面的 base.OnInit(e) 中收到以下错误（在此调用之前没有发生任何事情） - 错误是: 控件集合无法修改，因为控件包含代码块（即）。
好的，通过将引用移动到主体而不是头部来修复上述错误。对此进行了测试，但无论如何都无法正常工作。我必须创建一个空白页面并从头开始测试

【解决方案2】：

$(datePickers) 是一个列表。应该工作的东西是这样的

$('.datePicker').each(function(idx, obj) {
    $(obj).datepicker({ dateFormat: "dd/mm/yy" }); 
});

【讨论】：

您好 Pieter，我还在带有 css 类的页面中添加了一个标准文本框并得到了同样的错误

【解决方案3】：

我认为应该是：

if (datePickers.length > 0) { datePickers.datepicker({ dateFormat: "dd/mm/yy" });

【讨论】：

嗨 Sudhir，谢谢，但仍然无法正常工作！代码更改为 var datePickers = $('.datePicker'); if (datePickers.length > 0) { datePickers.datepicker({ dateFormat: "dd/mm/yy" }); }