MVC3 razor view error Microsoft JScript runtime error: Object doesn't support property or method 'datepicker'` - asp.net-mvc-3

Question

I am trying to display a datepicker for my Html.EditorFor
To do this I created an EditorTemplate in my Views\Shared\EditorTemplate folder , Named it DateTime.cshtml
but it is not working ,instead I am getting error ---Microsoft JScript runtime error: Object doesn't support property or method 'datepicker'
Plz help me to 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 (pasted 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 am able to get datepicker working on another 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 razor views is that
-->the first one( (datepicker not working) is using a ViewModel as model ie(mywebrole.ViewModels.EventViewModel)
--> and the second one is using the myWebrole.models.Events (datepicker working fine)
Is this an issue ?

Answer 1

Given that error, I think the problem is the selector. Instead of $("##ViewData.ModelMetadata.PropertyName"), try this one:
$("input.text").datepicker({ ...
(Alternatively, you could #Html.TextBoxFor(model => model) instead of #Html.TextBox, so that way the input would get id=PropertyName, and thus the selector should work).
Also, you're sure the script for the datepicker JQuery plugin loaded successfully on the page, right?