Unobtrusive Validation on en-GB Dates

Question

I am designing a data input form using asp.net MVC4 which has an input of type date.

Using the unobtrusive jQuery library in chrome and jQueryUI datepicker I was still getting an error (The field news_date must be a date.), after selecting a correct date format, using the datepicker (i.e. 14/02/2013) and submitting the form.

Some searching suggested I should use the jQuery.globilization library. So after reading the documentation I added a reference to the following script.

$(document).ready(function () {
    $.culture = Globalize.culture("en-GB");
    $.validator.methods.date = function (value, element) {
        return this.optional(element) || Globalize.parseDate(value, "dd/MM/yyyy", "en-GB");
    }
});

However I am still getting the error

If I debug the the above code in chrome i can see that the value of "value) is "2014-02-14".

Below is html which gets rendered.

<div class="editor-field">

<input class="text-box single-line datepicker hasDatepicker input-validation-error" data-val="true" data-val-date="The field news_date must be a date." id="news_date" name="news_date" type="date" value="">
<script type="text/javascript">
    $(function () {
        $(".datepicker").datepicker({ dateFormat: "dd/MM/yyyy" });
    });
    </script>
            <span class="field-validation-error" data-valmsg-for="news_date" data-valmsg-replace="true"><span for="news_date" class="" style="">The field news_date must be a date.</span></span>
        </div>

UPDATE: incidentally if i change my validator method to hardcode. i.e.

$.validator.methods.date = function (value, element) {
    return this.optional(element) || Globalize.parseDate("14/03/2014", "dd/MM/yyyy", "en-GB")
}

It works. So it definately appears to be the format that the date is being stored on the page prior to POST or submit validation which is the issue.

UPDATE after selecting the date if i run $('#news_date').val() in the chrome console, i get "2014-02-14" and i can debug my script and see the value being passed it the validator method it is this value and thus it doesnt match the british date format thus returning a null, rather than a value which would pass validation. So is my problem with how the datepicker is storing the date after selection?

Has anyone found a workaround for this in Chrome?

Answer 1

This workaround appears to handle chrome and ie etc. In chrome I cannot type in an incorrect date so the date picker will give me a valid date and when it passes it to the validator function it will be in the yyyy-mm-dd format. i.e lets me type straight into the input or use the picker, typing in an invalid date i.e. 2/30/2013 (invalid in en-GB culture) it correctly invalidates it and prevents further progress. If no better suggestions I think ill go with this as the best workable answer

$(document).ready(function () {
$.culture = Globalize.culture("en-GB");
$.validator.methods.date = function (value, element) {
    //This is not ideal but Chrome passes dates through in ISO1901 format regardless of locale 
    //and despite displaying in the specified format.

    return this.optional(element)
        || Globalize.parseDate(value, "dd/mm/yyyy", "en-GB")
        || Globalize.parseDate(value, "yyyy-mm-dd");
}});

Answer 2

Can i suggest you another work around, Put this in your web.config to avoid issues with differenet culture settings.

<globalization requestEncoding="utf-8" responseEncoding="utf-8" culture="en-GB" uiCulture="en-GB"/>

And in Jquery datepicker this would be enough,

 $(function () {
        $(".datepicker").datepicker({ dateFormat: "dd/MM/yyyy" });
 });

Answer 3

$(function () {
        $(".datepicker").datepicker({ dateFormat: 'dd/mm/yy' });
 });