dd-mm-yyyy Date Validation Error with Google Chrome

Question

I am developing an ASP.NET MVC4 application.

My View Model Class Property

[DisplayName("Birth Date")]
        [Required(ErrorMessage = "You must indicate your full birthday")]
        [DataType(DataType.Date), DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
        public DateTime BirthDate { get; set; }

Javascript Code

var dt = new Date();
    $(function () {
        $("#BirthDate").datepicker({
            showOn: "button",
            buttonImage: "@Url.Content("~/Content/themes/base/images/calendar.gif")",
            buttonImageOnly: true,
            dateFormat: 'dd/mm/yy',
            changeMonth: true,
            changeYear: true,
            yearRange: '1980:dt'
        });
    });

View code

<div class="block">
                    @Html.LabelFor(model => model.BirthDate, new { @Class = "compel" })
                    @Html.TextBoxFor(model => model.BirthDate)
                </div>

When I run the application in IE and Mozilla Firefox it works fine, but with google chrome, it gives validation error as The Value 24/12/2012 is invalid for Birth Date.

Kindly help me to resolve this issue.

score 1 · Answer 1 · edited May 23 '17 at 11:59

1

Seemingly IE & Firefox use same format as OS while Chrome does not, this sometimes causes an issue with date validation.

Maybe this will solve your problem: Unobtrusive validation in Chrome won't validate with dd/mm/yyyy

edited May 23 '17 at 11:59

Community

1
1

answered Jan 16 '13 at 14:53

Paul Brown

4,926
9
32
44

score 1 · Answer 2 · answered Jul 29 '15 at 15:52

To resolve the problem i have done :

add reference to the script datepicker-fr.js (you can find it here https://github.com/jquery/jquery-ui/tree/master/ui/i18n).

create a function and add it to my custom javascript file :

 function extendJQueryDateValidation() {

// fix date validation for chrome
jQuery.extend(jQuery.validator.methods, {
    date: function (value, element) {
        var isChrome = window.chrome;
        // make correction for chrome
        if (isChrome) {
            var d = new Date();
            return this.optional(element) ||
            !/Invalid|NaN/.test($.datepicker.parseDate("dd/mm/yy", value));
        }
            // leave default behavior
        else {
            return this.optional(element) ||
            !/Invalid|NaN/.test(new Date(value));
        }
    }
});
}

refer to http://devdens.blogspot.com/2011/11/jquery-validation-fix-for-date-format_29.html

In the page where i have the date input element i do :

        $(function () 
     {          
      extendJQueryDateValidation();        
      $.datepicker.setDefaults($.datepicker.regional   ["fr"]);    
               $("#dateField").datepicker(
    { yearRange: "1980:2015", 
 dateFormat: "dd/mm/yy", 
 changeMonth: true, 
 changeYear: true });

           });

score 1 · Answer 3 · answered Mar 31 '16 at 10:01

You can try this for date format: Example: '31/12/1999'

 jQuery.extend(jQuery.validator.methods, {
        date: function (value, element) {
            return /^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/.test(value);
        }
    });

score 0 · Answer 4 · edited May 23 '17 at 10:28

0

I searched for this and found multiple questions here and elsewhere. I found a simple solution and just wanted to share it with future searchers also;

https://stackoverflow.com/a/36903550/1997092

I found the simplest correction of this error to be the following code snippet after calling your validation file;
jQuery.validator.methods["date"] = function (value, element){
    var shortDateFormat = "dd/mm/yy";
    var res = true;
    try {
        $.datepicker.parseDate(shortDateFormat, value);
    } catch (error) {
        res = false;
    }
    return res;
}
Even in versions found in 2016 im still having this issue without the above code in Chrome and not Firefox.

This is my preferred solution as it does not require any additional libraries or plugins to work.

I found this code snippet while googling the issue here.

Hope it helps someone.

edited May 23 '17 at 10:28

Community

1
1

answered Apr 28 '16 at 01:20

Tarquin

482
2
6
21

Please do not post links to [duplicate answers](//meta.stackexchange.com/a/211726/206345). Instead, consider other actions that could help future users find the answer they need, as described in the linked post. (Further: a link to that question was already provided in a [previous answer](http://stackoverflow.com/a/14361144/1677912).) – Mogsdad Apr 28 '16 at 02:09
Apologies for trying to share the information. Could you advise what I SHOULD do/have done instead? – Tarquin Apr 28 '16 at 04:07
Identify duplicate _questions_ and flag them or vote them to close, depending on your privilege level. Leave a comment on the question, along the lines of "This answer over here may be useful, in _these specific circumstances_". (This is advice from the FAQ link I provided.) – Mogsdad Apr 28 '16 at 14:00

dd-mm-yyyy Date Validation Error with Google Chrome

4 Answers4