dd-mm-yyyy format for datepicker of MVC is not working in Chrome

Question

In my MVC5 Razor code for entering Date of Birth I am using a datepicker as below

    @Html.EditorFor(model => model.date_of_birth, 
new { htmlAttributes = new { @class = "m-wrap  datepicker" } })

Here for the model.date_of_birth an EditorFor is calling and making it as a datepicker with @class = datepicker

Then the datepicker is initiated at the script area with below code

 $('.datepicker').datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true
        })

Here the date format is 'yyyy-mm-dd' and it is working fine, but the user want it to be in dd-mm-yyyy format. So I changed the format in script as dd-mm-yyyy In Internet Explorer it is working fine but in Chrome it is giving an error for some date

eg:  14-05-2015

The field Date of Birth* must be a date.

the date 11-05-2015 is working fine in chrome also. So I guess Chrome is taking the date format in mm-dd-yyyy.

The format 'dd-M-yyyy' is also working correctly only error coming for dd-mm-yyyy

Any way to overcome this browser specific error?

Edit

$.validator.addMethod('date', function (value, element) {
    if (this.optional(element)) {
        return true;
    }
    var valid = true;
    try {
        $.datepicker.parseDate('dd/mm/yyyy', value);
    }
    catch (err) {
        valid = false;
    }
    return valid;
});

$(function () {

 $('.datepicker').datepicker({
            format: 'dd/mm/yyyy',
            autoclose: true
        })
});

The issue is that jquery.validate.js expects the date in either `MM/dd/yyyy or the ISO format. Refer [this answer](http://stackoverflow.com/questions/27285458/jquery-ui-datepicker-and-mvc-view-model-type-datetime/27286969#27286969) for solutions. — , Jun 22 '15 at 03:34
@Stephenmuecke one doubt..if it is issue with jquery.validate.js then how it is working in internet explorer. — Sachu, Jun 22 '15 at 04:03
@stephenMuecke i applied the script and changes now even the date less than 12 is also not accepting :( 05/07/2015 is also giving error — Sachu, Jun 22 '15 at 04:49
Works fine for me. Can you edit the question to show the actual code you tried (note the `$.validator.addMethod()` should not be inside `document.ready()`) — , Jun 22 '15 at 04:54
Looks OK. Do you have any errors in the browser console? Is the `$.validator.addMethod()` function after `jquery.validate.js` and `jquery.validate.unobtrusive.js`? — , Jun 22 '15 at 05:35
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/81146/discussion-between-sachu-and-stephen-muecke). — Sachu, Jun 22 '15 at 05:42
Dont know whether it will do or not but change $.datepicker.parseDate('dd/mm/yyyy', value); to $.datepicker.parseDate('dd/mm/yy', value); — Vivekh, Jun 22 '15 at 05:59

score 9 · Accepted Answer · answered Jun 29 '15 at 03:19

At last I found a solution.

First I create a new java script file with name jquery.validate.date.js with the below code in it

$(function () {
    $.validator.methods.date = function (value, element) {
        if ($.browser.webkit) {
            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));
        }
    };
});

It overwrite the date validation function in jquery.validate.js

Then i call the script just after 'jquery.validate.js' like below

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.val.js")"/>

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.val.date.js")"/>

Now the date format dd/mm/yyyy is working in both chrome and IE without any error.

score 2 · Answer 2 · edited May 23 '17 at 12:34

2

There is a problem with unobtrusive validator for dates in non 'yyyy-MM-dd' format. Similar question is here.

Solving by disabling validation of dates

jQuery.validator.methods["date"] = function (value, element) { return true; }

or by using globalization.

In my case i always set input to readonly and add datepicker from jquery.ui. with localization.

@Html.TextBoxFor(model => model.date_of_birth, 
    new { htmlAttributes = new { @class = "m-wrap  datepicker", @readonly="readonly" } })

and some js:

// include localization for datepicker

$( "#date_of_birth" )
    .datepicker( $.datepicker.regional[ "ru" ] )
    .datepicker({ dateFormat: 'dd-mm-yy' });

edited May 23 '17 at 12:34

Community

1
1

answered Jun 22 '15 at 08:39

aleha_84

8,309
2
38
46

i didn't understand the way u r doing. – Sachu Jun 22 '15 at 08:45
@Sachu just create readonly input and initialize jquery datepicker on it. This allow you to prevent incorrect input from user and always have correct formatted value in field. Edited answer. – aleha_84 Jun 22 '15 at 08:52

Scott Anderson · Answer 3 · 2015-06-22T05:04:51.873

0

You may need to set your culture in web.config so that .net expects the date in dd-mm-yyyy format rather than the default mm-dd-yyyy US format.

e.g.

<configuration>
    <system.web>
        <globalization culture="en-AU" uiCulture="en-AU" />
    </system.web>
</configuration>

Updated

Also try annotating the property e.g.

[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd-MM-yyyy}")]
public DateTime date_of_birth;

edited Jun 22 '15 at 05:04

answered Jun 22 '15 at 04:14

Scott Anderson

1,363
1
10
19

Are you annotating the date_of_birth property of the model?... could try adding [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd-MM-yyyy}")] – Scott Anderson Jun 22 '15 at 04:47

dd-mm-yyyy format for datepicker of MVC is not working in Chrome

3 Answers3