Whats wrong with this jQuery Date picker code?

Question

I have been using the jQuery date picker for a while and its great. however, I'm now using it in a user control and cant get it to work failing with the error:

Object Does Not Support This Property or Method when creating the date picker.

My site structure is as follows:

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

I have added jQuery to the master page like so:

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

I have added jQuery to the User control like so:

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

The text boxes im trying to turn in to date pickers is in the user control inside a 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>

And finally the jQuery im using to turn the text boxes in to date pickers (in the user control):

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

Can anyone see what is wrong with this? I was thinking it could be to do with the paths to the jQuery files depending on whether the current context is in the pages folder, or the web controls folder.

Answer 1

I think it should be:

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

Answer 2

Use ResolveUrl for your script and 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");

}

Answer 3

$(datePickers) is a list. What should work is something like

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