I did this example using the pluralsight video but the date picker is just not appearing.
1st. I created the template.
@model System.DateTime?
@Html.TextBox("",ViewData.TemplateInfo.FormattedModelValue,new {
data_datepicker = true
});
2nd. I created the line in my .js file
$(document).ready(function () {
$(":input[data-datepicker]").datepicker();
}
That should be all to make it work according to the video.
- I am also including the jquery files of course
> <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> <script > src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" > type="text/javascript"></script> <script > src="@Url.Content("~/Scripts/HR.js")" type="text/javascript"></script>
The complete resulting html (resumed) seems fine:
<html><head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js" type="text/javascript"></script>
</head>
<body>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<script src="/Scripts/HR.js" type="text/javascript"></script>
<form action="/ApplicantPosition/Create" enctype="multipart/form-data" method="post"> <fieldset>
<div class="editor-label">
<label for="appliedDate">Date applied</label>
</div>
<div class="editor-field">
<input data-datepicker="True" data-val="true" data-val-required="Applied date is required" id="appliedDate" name="appliedDate" type="text" value="" />;
</body>
</html>
You are not closing the document ready function. Try like this:
Notice the additional
);at the end of my script which is missing in yours.