MVC3 DataType.Date EditorFor Outputting the Wrong Class in HTML

I have an MVC3 project. I have 2 model classes. Lets call them FooYes and FooNo.

I created controllers for each.

I created CRUD views for both.

I then implemented the jQuery DatePicker according to this link. I only implemented the picker part and not the validation.

In my FooYes edit.cshtml the date picker works fine. In the edit.cshtml for FooNo it doesn't.

The only difference I found is in the classes that get output for the models:

FooYes looks like this in the final html:

<开发者_C百科input class="date" 

FooNo looks like this:

<input class="text-box single-line"

Here is the model for FooYes:

    [Display(Name = "Creation Date")]
    [DataType(DataType.Date)]
    public virtual DateTime CreationDate { get; set; }

Here is the model for FooNo:

    [Display(Name = "Expiration Date")]
    [DataType(DataType.Date)]
    public virtual DateTime ExpirationDate { get; set; }

As you can see the declaration is the same in the model, so that can't be it. I even tried copy and paste the ExpirationDate property from FooNo into FooYes and duplicated all the stuff from FooNo to FooYes inside of FooYes and it WORKED then. So it is not the code in the model

Here is the code from the .cshtml:

    <div class="editor-label">
        @Html.LabelFor(model => model.CreationDate)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.CreationDate)
        @Html.ValidationMessageFor(model => model.CreationDate)
    </div>

The only thing different between this and the other is the name of the field.

When I look at the source html in the final result the headers, includes, links, everything is exactly the same except in the one that doesn't work the class= is set to the text thing instead of date.

I am totally confused. Anyone have any ideas what would cause this?

If you really just followed this link, the reason why it didn't work is because the selector to set up the datepicker only includes .date. Try changing the JavaScript to:

$('.date, .text-box.single-line').datepicker({dateFormat: "dd/mm/yy"});

And see if it works. If it does, you may want to think about revising the textbox generated for FooNo, as .text-box.single-line seems like a generate class, which may be shared by other textboxes which are not intended to be datepickers.

To answer your comment, you can have the Date.cshtml template be global by putting it in the Views/Shared/EditorTemplates directory