Jquery Datepicker Chrome

Vince V. picture Vince V. · May 11, 2011 · Viewed 22.3k times · Source

When using jQuery UI Datepicker, we encouter a problem when used in Google Chrome: when we enter a date with a day higher than 12, it does not accept it as a valid date, this is because chrome thinks the dateformat is mm/dd/yyyy. We tried to solve this by adding code to try to force the date settings into dd/mm/yyyy

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

Is there any way to resolve this issue, so our datepicker will accept dd/mm/yyyy values? We only have this issue in google Chrome, the datefix works for firefox, ie & safari. We are using ASPX & MVC3 with this project.

If someone could solve our issue, that would be great

Thanks

Answer

user1011138 picture user1011138 · Oct 24, 2011

I have had the same problem and is related with all Webkit based web browsers. If you set uppercase M the textbox show the moth with letters. The best solution for me was to override the validate date function from jquery.validate.js

Create jquery.validate.date.js and ensure it is loaded after jquery.validate.js

Add the following code to jquery.validate.date.js

$(function() {
    $.validator.methods.date = function (value, element) {
        if ($.browser.webkit) {

            //ES - Chrome does not use the locale when new Date objects instantiated:
            var d = new Date();

            return this.optional(element) || !/Invalid|NaN/.test(new Date(d.toLocaleDateString(value)));
        }
        else {

            return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
        }
    };
});