Что не так с этим кодом выбора jQuery Date? - PullRequest
1 голос
/ 06 декабря 2011

Я уже некоторое время использую средство выбора даты 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 class: 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, в зависимости от того, находится ли текущий контекст в папке страниц или в папке веб-элементов управления.

Ответы [ 3 ]

1 голос
/ 06 декабря 2011

Используйте 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");

}
0 голосов
/ 06 декабря 2011

Я думаю, это должно быть:

if (datePickers.length> 0) {datePickers.datepicker ({dateFormat: "dd / mm / yy"});
0 голосов
/ 06 декабря 2011

$(datePickers) - это список. Что должно работать что-то вроде

$('.datePicker').each(function(idx, obj) {
    $(obj).datepicker({ dateFormat: "dd/mm/yy" }); 
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...