jQuery DatePicker MVC4 EditorFor

Question

I need to use datepicker on an EditorFor field.

My code for the view is:

<div class="editor-label">
    @Html.Label("birthDate","birthDate")
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.birthDate, new { @class = "datepicker"})
    @Html.ValidationMessageFor(model => model.birthDate)
</div>

The script:

<script type="text/javascript">
$(document).ready(
    function () {
        $('.datepicker').datepicker({
            changeMonth: true,
            changeYear: true,
            minDate: "-99Y",
            dateFormat: "dd/mm/yyyy"
        });
    });

I can't make it work. I have the following error: Microsoft JScript runtime error: Object doesn't support this property or method 'datepicker'.

I have already loaded jQuery before I try to call the function.

Answer 1

@Html.EditorFor(model => model.birthDate, new { @class = "datepicker"})

Will not work, because "EditorFor" will not accept (pass along to the DOM) a Class.

So, you need to use "TextBoxFor" which will accept a Class or better yet, create an EditorTemplate to handle any field that is a DateTime and add the class there. This link details how to make the Template.

Once you have the Class working (can be verified in the source code), the rest is just referencing the jquery code. I use

@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryui")

and activating it with the script you already have. Watch that the name '.datepicker' is Exactly the same as the Class.