1
我一直在使用jQuery日期選擇器，而且它的功能非常棒。但是，我現在在用戶控件中使用它，並且無法讓它在出現錯誤時失敗：這個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>
即時試圖打開日期選擇器的文本框是在用戶控制
<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
}
}
任何人都可以看到的是：一個GridView控件（日期選擇器CSS類）中這個錯誤？我認爲這可能與jQuery文件的路徑有關，具體取決於當前上下文是在頁面文件夾還是Web控制文件夾中。
jQuery完全有能力處理選擇器不返回任何元素的情況 - 這樣做看起來好像不會讓你獲得任何東西，並且使代碼複雜化。 –
@Anthony Grist - 謝謝，我補充說，因爲我最初認爲這是造成這個問題（文本框在編輯模板，並不存在第一頁加載）。感謝您的確認 – WraithNath
說實話，我認爲你原來以爲這是jQuery UI導入問題很可能是正確的。那，或者不管什麼原因你的jQuery UI .js文件不包括datePicker代碼。您是否在使用從同一個.js文件導入的方法的同一頁面中有任何其他代碼？ –