Question

Inside the Views -> Shared folder I have the DateTime.ascx partial view;

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.DateTime?>" %>
<%:Html.TextBox("", (Model.HasValue ? Model.Value.ToLongDateString() : string.Empty), 
    new { @class = "datePicker" })%>

This works in most of my application thanks to the jquery library http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js and this javascript code;

        // noWeekendsOrHolidays
        //  beforeShowDay: $.datepicker.noWeekends
        $(function () {
            $(".datePicker").datepicker({ showOn: 'both', dateFormat: 'dd MM yy', changeMonth: true, changeYear: true, yearRange: 'c-1:c+1', beforeShowDay: noWeekendsOrHolidays });
        });

I have a view as follows;

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.master" 
Inherits="System.Web.Mvc.ViewPage<SHP.WebUI.Models.BankHolidayViewModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    BankHoliday
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <% using (Html.BeginForm("Create", "BankHoliday"))
       {%>
       <%: Html.AntiForgeryToken() %>
        <h3>Bank Holiday Administration</h3>
        <% if (TempData["UpdatedFlag"].ToString() == "True")
        { %>
        <p class="success">At time <% Response.Write(DateTime.Now.ToString("T")); %> - Details have been successfully saved 
            </p>
        <%}
        else if (TempData["UpdatedFlag"].ToString() == "False")
        {%>
        <p class="error">At time <% Response.Write(DateTime.Now.ToString("T")); %> - ERROR! Invalid date entered has NOT been saved 
            </p>
        <%} %>        
             <p>Select the year: <%: Html.DropDownListFor(model => model.SelectedYear, Model.YearList)%></p>
            <fieldset>
            <legend>Enter the bank holidays here:</legend>
             <p><i>You can find the bank holiday dates on this <a target="_blank" href="http://www.year-planner-calendar.wanadoo.co.uk/">website</a>.</i> </p>      
            <table class="groupBorder">
                <tr>
                    <th>Bank Holiday</th>
                    <th>Date</th>
                    <th>Notes</th>
                </tr>
                <%: Html.EditorFor(x => x.BankHolidays) %>
                <tr>
                    <td colspan="3" style="padding-top:20px;text-align: center">
                        <input type="submit" value="Save" id="btnSubmit"/>
                    </td>
                </tr>
            </table>
            </fieldset>
        <% } %>
        <script language="javascript" type="text/javascript">
            $(function () {
                $("#SelectedYear").change(function () {
                    var year = $("#SelectedYear").val();
                    $("#wholepage").load('<%:Url.Content(@"~/BankHoliday/Create/")%>' + year);
                });
            });
    </script>
</asp:Content>

In here you can see the line: <%: Html.EditorFor(x => x.BankHolidays) %>
This has an associated Editor Template;

” %>

<tr>
    <td><%: Model.T.BankHolidayDescription%>
        <%: Html.HiddenFor(model => model.BH.BankHolidayId) %>
        <%: Html.HiddenFor(model => model.T.BankHolidayTypeId) %>
    </td>
    <td><%: Html.EditorFor(model => model.BH.NullableBankHolidayDate)%></td>
    <td><%: Html.EditorFor(model => model.BH.BankHolidayComment)%></td>
</tr>

The date picker needs to apply to <%: Html.EditorFor(model => model.BH.NullableBankHolidayDate)%>

However it does not work. I click on the field and nothing happens.

When I press F12 and go into Developer Tools, I find the HTML for the control with the DatePicker looks like;

<input name="BankHolidays[6].BH.NullableBankHolidayDate" class="datePicker hasDatepicker" id="BankHolidays_6__BH_NullableBankHolidayDate" type="text" jQuery1341928330742="131"/>

So the class has been assigned to datePicker, so surely it should work?

Answer 1

The problem was that I was populating the grid from an Ajax call, and the $(document).ready(function () {}) event did not fire.
When I changed the code to submit to a POST action and populate the grid from that, it worked.
I have have assigned the datepicker in a success function after the Ajax call, but I could not get that to work.