I've been struggling to integrate a javascript datepicker into my MVC3, EF4 project with the UK date format (dd/mm/yyyy). After hours of research, I decided to try using the 'globalize' library scripts based on this helpful link.
However, when testing, I encountered an error:
Uncaught TypeError: Cannot read property 'methods' of undefined$.validator.methods.date line. My knowledge of javascript is limited, and looking at examples using the 'globalize' library did not provide any explanation for this issue.
Below, I have included the relevant code snippet from my view:
<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-1.5.1.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.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/jquery.globalize/globalize.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.globalize/cultures/globalize.culture.en-GB.js")" type="text/javascript"></script>
<link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
Globalize.culture("en-GB");
$.validator.methods.date = function (value, element) { return this.optional(element) || Globalize.parseDate(value); }
</script>
<script type="text/javascript">
$(document).ready(function () {
$('.date').datepicker({ dateFormat: "dd/mm/yy" });
});
</script>
//SNIP
<div class="editor-field">
@Html.TextBox("Expires", Model.Expires, new { @class = "date" })
@Html.ValidationMessageFor(model => model.Expires)
</div>
If anyone could offer assistance in resolving this issue, it would be greatly appreciated.
Thank you.