How to get a datepicker for Html.Editorfor
asp.net-mvc-3, datepicker, jquery, jquery-ui-datepicker
Solution
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)
Problem
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