Question

My Datetime picker is working fine for “Html.TextBoxFor” but when i have “Html.EditorFor” it is not showing anydatepicker.

i have a Jquery as follows:

  $(document).ready(function () {
               $('.dp').datepicker({
                   changeMonth: true,
                   changeYear: true,
                   dateFormat: 'yy-mm-dd'
               });
           }); 

I want to use this function in my .aspx page.

 <div class="float-left">
 <%: Html.Label("BAASent Date") %>
 <br />
 <%:Html.TextBoxFor(model => model.BAASentDate, new { @class = "dp" }) %>
 <%: Html.ValidationMessageFor(model => model.BAASentDate) %>
 </div> 

for the above code everything works fine.
but when i replace “Html.TextBoxFor” with “Html.EditorFor”,it is not displaying any datetime picker.

whats going wrong here?

Answer 1

When you use EditorFor you probably do not apply the dp class to the corresponding input field and so the $('.dp') selector that you are using for your deatepicker returns nothing.

One possibility is to apply the class to the parent div:

<div class="float-left dp">
    <%= Html.Label("BAASent Date") %>
    <br />
    <%= Html.EditorFor(model => model.BAASentDate) %>
    <%= Html.ValidationMessageFor(model => model.BAASentDate) %>
</div>

and then adjust your selector so that you fetch the input field that’s inside the div with the given classname:

$(document).ready(function () {
    $('.dp :input').datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'yy-mm-dd'
    });
});

Another possibility is to write a custom editor template for the DateTime field in which you would apply the dp class to the TextBox. So inside ~/Views/Shared/EditorTemplates/DateTime.ascx:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%= Html.TextBox(
    "", 
    ViewData.TemplateInfo.FormattedModelValue,
    new { @class = "text-box single-line dp" }
) %>

and then:

<div class="float-left">
    <%= Html.Label("BAASent Date") %>
    <br />
    <%= Html.EditorFor(model => model.BAASentDate) %>
    <%= Html.ValidationMessageFor(model => model.BAASentDate) %>
</div>

and finally:

$(document).ready(function () {
    $('.dp').datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'yy-mm-dd'
    });
});