How to get a datepicker for Html.Editorfor

Question

On my MVC3 razor page I have a date field

@Html.EditorFor(model => model.Member.Dob)

Given below is the code I am trying to get a datepicker for the Date of Birth field.

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 <script type="text/javascript">
      $(document).ready(function () {
          debugger;
          $("#Member_Dob").datepicker();
      });
  </script>

But when I run this page I am getting error

Microsoft JScript runtime error: Object doesn't support property or method 'datepicker'

Please help me find a way to add datepicker to my page

score 21 · Accepted Answer · answered Apr 20 '12 at 18:02

You'll need to create an EditorTemplate in your Views\Shared\EditorTemplate folder. Name it DateTime.cshtml. Should look something like the following:

@model System.DateTime?
 <div class="editor-label">
    @Html.Label("")
</div>
<div class="editor-field">
    @Html.TextBox("", String.Format("{0:MM/dd/yyyy}",(Model == DateTime.MinValue)? null : Model), new { @class="text"})
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#@ViewData.ModelMetadata.PropertyName").datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: 'mm/dd/yy',
            gotoCurrent: true
        });
    });
</script>

Use it as follows:

@Html.EditorFor(model => model.Member.Dob)

can you please tell me how to render datetime.cshtml in my view thank u so much — Ammar, Mar 10 '15 at 06:59
If you use `@Html.IdForModel()` instead of `@ViewData.ModelMetadata.PropertyName` it will work on nested properties. See: http://stackoverflow.com/questions/15654716/how-do-i-get-the-the-fully-qualified-member-name-in-an-editortemplate — Thorkil Holm-Jacobsen, Apr 14 '15 at 11:51

score 1 · Answer 2 · answered Jan 23 '13 at 08:12

1

This article covers this perfectly: http://blogs.msdn.com/b/stuartleeks/archive/2011/01/25/asp-net-mvc-3-integrating-with-the-jquery-ui-date-picker-and-adding-a-jquery-validate-date-range-validator.aspx

answered Jan 23 '13 at 08:12

angularsen

8,160
1
69
83

score 0 · Answer 3 · answered Jul 02 '20 at 20:48

<div class="form-group">
                @Html.LabelFor(model => model.Birthdate, "Birthday", new { @class = "control-label col-md-2" })
                <div class="col-md-5">
                    @Html.Kendo().DatePickerFor(model => model.Birthdate)
                    @Html.ValidationMessageFor(model => model.Birthdate)
                </div>
            </div>

How to get a datepicker for Html.Editorfor

3 Answers3

Linked