This is sample code. On load i can see dateofbirth changing to 08-06-1990 but on clicking the textbox the datepicker is not shown. The layout.cshtml contains following
<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/jquery-ui-1.8.20.js"></script>
and i can see they are loaded in firebug.I have removed the EditorFor and have instead
used just of testing. Any idea.
@model SMS.Model.Student
@{
ViewBag.Title = "Edit";
}
<script type="text/javascript">
$(document).ready(function(){
$('#DateofBirth').val("08-06-1990");
$('#DateofBirth').datepicker();
});
</script>
<h2>Edit</h2>
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<fieldset>
<legend>Student</legend>
@Html.HiddenFor(model => model.Id)
<div class="editor-label">
@Html.LabelFor(model => model.RegistrationNo)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.RegistrationNo)
@Html.ValidationMessageFor(model => model.RegistrationNo)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.DateofBirth)
</div>
<input id="DateofBirth" value="07-06-1990" />
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
It works now. I noticed that my layout.cshtml had
in the body section and i was explicitly referencing the jquery and jquery ui using loading the the jquery file twice causing this issue.
I removed this from header
and moved
to header and added jqueryui to the header. It works perfectly.