Asp.net MVC set validation date format fails on Chrome

Question

I'm having problems with setting validations date format Chrome in asp.net mvc, for other browsers like IE,Firefox works correctly .

I have defined dates in my model like next code:

[Required]
[Display(Name = "Data fi publicació")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
public DateTime PublishingEndDate { get; set; }

And in my views :

@Html.TextBoxFor(model => model.PublishingEndDate)
@Html.ValidationMessageFor(model => model.PublishingEndDate)

The problem It seems that @Html.ValidationMessageFor, validates the date with format MM/dd/yyyy, but what I want is to validate with european format dd/MM/yyyy. How can I change default culture validations format date to dd/MM/yyyy ?

Thanks for your help

A similar question was asked here: http://stackoverflow.com/questions/5199835/mvc-3-jquery-validation-globalizing-of-number-decimal-field — Ed Charbeneau, Oct 11 '12 at 18:13

score 22 · Accepted Answer · edited Feb 27 '13 at 06:27

Finally I discover the problem only affects Chrome, with IE, Firexfox it works perfectly, it seems is a chrome bug, I found the solution in http://forums.asp.net/t/1729179.aspx/1

The validator method of jquery has to be override using the following code:

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

$.validator.addMethod('date',
    function (value, element, params) {
        if (this.optional(element)) {
            return true;
        }

        var ok = true;
        try {
            $.datepicker.parseDate('dd/mm/yy', value);
        }
        catch (err) {
            ok = false;
        }
        return ok;
    });
});

My problem was that if I picked a second date in the datepicker, it would give me a validation error - Only in Chrome (using 40.0.2214.115). This solution fixed it nearly three years after the original question! Nice one! — ComfortablyNumb, Mar 12 '15 at 10:01

score 1 · Answer 2 · answered Oct 11 '12 at 18:11

1

Be sure you've set your culture in web.config. This will use the appropriate date and number formatting for the culture chosen.

http://msdn.microsoft.com/en-us/library/bz9tc508(v=vs.100).aspx

answered Oct 11 '12 at 18:11

Ben Finkel

4,753
7
34
49

score 1 · Answer 3 · answered Apr 03 '15 at 08:35

This helped me:

$(function() {
            $(".datepicker").datepicker({
                todayBtn: true,
                language: "en-GB",
                format: "dd/mm/yyyy",
                clearBtn: true,
                pickTime: false
            });

            $.validator.addMethod("date",
                function(value, element) {
                    return this.optional(element) || parseDate(value, "dd-MM-yyyy") !== null;
                });
        });

score 0 · Answer 4 · answered Aug 05 '15 at 14:01

To avoid client side validation, you don't want any data-val attributes associated with the input. So what I did is to write down the plain HTML instead of using TextFor or EditorFor etc...

<input type="text" class="datepicker form-control">

Works fine for me...

score 0 · Answer 5 · answered Mar 08 '17 at 16:01

If you don't want to use datetime picker:

Client validation issues can occur because of MVC bug (even in MVC 5) in jquery.validate.unobtrusive.min.js which does not accept date/datetime format in any way. Unfortunately you have to solve it manually.

My finally working solution:

You have to include before:

@Scripts.Render("~/Scripts/jquery-3.1.1.js")
@Scripts.Render("~/Scripts/jquery.validate.min.js")
@Scripts.Render("~/Scripts/jquery.validate.unobtrusive.min.js")
@Scripts.Render("~/Scripts/moment.js")

You can install moment.js using:

Install-Package Moment.js

And then you can finally add fix for date format parser:

$(function () {
    $.validator.methods.date = function (value, element) {
        return this.optional(element) || moment(value, "DD.MM.YYYY", true).isValid();
    }
});

Asp.net MVC set validation date format fails on Chrome

5 Answers5

Linked