MVC3 Date validation using globalize library script

Question

I am trying to get my MVC3, EF4 project to work with the javascript datepicker, but I am running into issues as I want the date to be in the UK format (dd/mm/yyyy).

I have spent several hours researching this issue and I have decided to implement the 'globalize' library scripts as I have seen in this link.

However I am getting a Uncaught TypeError: Cannot read property 'methods' of undefined in the javascript (coming from the $.validator.methods.date line) when I run it. My knowledge of javascript is pretty limited and all the examples I have found that use the 'globalize' library have no mention of this error and therefore I am quite stumped.

I have shown the relevant code from my view below:

<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>

Could someone please help me fix this issue.

Thanks very much.

score 0 · Answer 1 · answered Jul 22 '14 at 21:18

I haven't used the Globalize library in a while but I feel like it might be overkill for you -- assuming that you only need the date value in en-GB, the following Javascript/jQuery code will work (and here is a fiddle):

<input type="text" class="date" placeholder="en-gb datepicker" />
<button id="btnGetVal">Get Value</button>

<script type="text/javascript">
$(document).ready(function () {
    /* you correctly have the date format set when initializing the datepicker */
    $('.date').datepicker({ dateFormat: "dd/mm/yy" });
    /* create an event handler for the "click" function of the button */
    $('#btnGetVal').on('click', function() {
       /* event handler */
       var targetValue = $('.date').val();
       alert(targetValue);
    });
});
</script>

I tested this with jQuery 2.1.0 and jQuery UI 1.10.4 - you may need to update your NuGet packages for both (I see you're using a really old version of jQuery so I assume you either need to support IE8 or are using an older version of MVC).

As an aside, you may want to make sure you initialize all of your Javascript code inside of the document.ready() function so that all functions are accessible upon load (because your Globalize code could not be accessible when you init the datepicker(). I'd recommend reading more here: http://learn.jquery.com/using-jquery-core/document-ready/

MVC3 Date validation using globalize library script

1 Answers1