Error viewing the MVC3 firewall. Microsoft JScript runtime error: the object does not support the property or method 'datepicker``

Question

I am trying to display datepicker for my Html.EditorFor

To do this, I created an EditorTemplate in my Views \ Shared \ EditorTemplate folder, named it DateTime.cshtml

but it doesn't work, instead I get an error --- Microsoft JScript runtime error: Object doesn't support property or method 'datepicker'

Plz help me fix this error

This is my razor view page.

 @model MyWebRole.ViewModels.ViewModelEvents @{ ViewBag.Title = "Create"; Layout = "~/Views/Shared/_Layout.cshtml"; } @using (Html.BeginForm()) { @Html.ValidationSummary(true) <fieldset style="width:50%"> <legend>Event Details:</legend> <div> <table> <tr> <td> @Html.EditorFor(model => model.vmStartDate) @Html.ValidationMessageFor(model => model.vmStartDate) </td> </tr> </table> </div> <p> <input type="submit" value="Save" /> </p> </fieldset> } 

and here is my DateTime.cshtml (inserted below)

 @model System.DateTime? <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> 

I can get datepicker to work in a different view

  @model MyWebRole.Models.Events @{ ViewBag.Title = "Edit"; Layout = "~/Views/Shared/_Layout.cshtml"; } @using (Html.BeginForm()) { @Html.ValidationSummary(true) <fieldset style="width:50%"> <legend>Event Details:</legend> <div> <table> <tr> <td> @Html.EditorFor(model => model.StartDate) @Html.ValidationMessageFor(model => model.StartDate) </td> </tr> </table> </div> <p> <input type="submit" value="Save" /> </p> </fieldset> } 

The difference between the two types of razors is that -> the first one ((datepicker does not work) uses the ViewModel model as ie (mywebrole.ViewModels.EventViewModel)

->, and the second one uses myWebrole.models.Events (datepicker works fine)

This is problem?

Answer 1

Given this error, I think the problem is the selector. Instead of $ ("# @ ViewData.ModelMetadata.PropertyName") try the following:

 $("input.text").datepicker({ ... 

(Alternatively, you can use @ Html.TextBoxFor (model => model) instead of @ Html.TextBox, so that the input will get id = PropertyName, and therefore the selector should work).

In addition, you are sure that the script for the jquery datepicker plugin has been successfully loaded on the page, right?