MVC DateTime validation - UK Date format

Question

I have a simple view with two date fields with ValidationMessageFor controls added for the unobtrusive JavaScript validation.

My issue is I keep getting told my date is invalid, when it is in correct format (dd/MM/yyyy)

I have added <globalization culture="en-GB" uiCulture="en-GB"/> to my web.config, and also included [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)] on each DateTime property, yet it still won't accept UK format dates.

Is there anything obvious I am missing here?

So, solved with this post -> http://stackoverflow.com/questions/511439/custom-date-format-with-jquery-validation-plugin but WHY do I need to create a custom validation method? Surely if I specify the format in the model,and specify my culture, it should use that date format? — mp3duck, Aug 21 '12 at 10:40
@SimonWhitehead It seems that way, but this was also happening when running locally on my dev machine — mp3duck, Aug 21 '12 at 10:45
I've had similar issues: http://stackoverflow.com/questions/9821407/mvc3-en-gb-dates-in-get Because Microsoft believe no one exists outside of the US, that's why :) — Liam, Aug 21 '12 at 12:38
Although "no one exists outside" comment is true, it's a bit misleading I think, because not MS but majority of US developers believe no one exists outside of the US, _and_ the same time majority of UK developers believe no one exists outside UK, and so on... — g.pickardou, May 11 '15 at 15:36

score 103 · Accepted Answer · answered Dec 29 '12 at 12:06

103

Actually you just need to overload unobtrusive JavaScript validation method for date

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

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

answered Dec 29 '12 at 12:06

Bohdan

1,984
3
20
27

3

There is an international date validation method that can be used instead in the [additional-methods.js](http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js) library. – Rowan Jun 18 '13 at 09:05
In my case I've replaced the parseDate() call because I wanted to use date and time (and it seems the datepicker doesn't support this), so I've used this: ` var re = /\d{4}-[01]\d-[0-3]\d [0-2]\d:[0-5]\d/; var ok; try { ok = value.match(re) != null; } ` – lutecki Oct 27 '15 at 17:30
Just to clarify, @lutecki's regex expression validates yyyy-mm-dd hh:mm – bluedot Jan 15 '18 at 15:47

score 12 · Answer 2 · answered Jul 31 '13 at 01:59

12

Bohdan's example worked a treat! I've +1 your answer mate.

For completeness I've written a blog post on how to integrate all the parts (Model, View, custom EditorTemplate, jQuery includes and adding Bohdan's solution).

You can read it here: http://www.kestrelblackmore.com/blog/jquery-datepicker-mvc4

answered Jul 31 '13 at 01:59

kestrelb

246
2
5

It's a great thing you put it on a blog and explained the whole procedure step by step, thanks. – Ivan Golović Apr 29 '14 at 14:57

score 4 · Answer 3 · answered Feb 18 '15 at 16:43

I know it's old but using this I added to the input an attribute with the current date format (which I fetched from the ASP MVC code with CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern.ToLower()).

Then I rewrote the validation javascript to use the format found in the attribute.

        var format = "mm/dd/yyyy";
        if (element.attributes["data-format"]) {
            format = element.attributes["data-format"].value;
        }

I also read the same attribute for the jquery ui datepicker. It might not be that usefull but it can keep the format consistent with the culture at least. Though it could help someone

iAM · Answer 4 · 2016-12-10T21:33:32.173

3

I have taken a different approach to solve this compared to other answers. Use jQuery to add a new date function which will force the date to use the current local culture set in the application.

$.validator.addMethod('date', function (value, element) {
                var d = new Date();
                return this.optional(element) || !/Invalid|NaN/.test(new Date(d.toLocaleDateString(value)));
            });

That is if it fails on jQuery validation. I credit this answer to Elton Stoneman post which can be read here

Hope this will help someone else.

edited Dec 10 '16 at 21:33

answered Feb 26 '15 at 23:01

iAM

1,365
15
25

Hi Aim, looks like a nice simple solution. Where do you insert this? – mattpm Jan 19 '17 at 22:51
1

@mattpm you will insert it in the JavaScript code for the view that have a date field – iAM Jan 20 '17 at 06:10

score 1 · Answer 5 · edited Jun 06 '17 at 09:52

Try change this direct in jquery.validate.js. Work with $.datpicker

date: function (value, element) {
    var s = value;

    var ind2 = 3;
    var ind3 = 6;
    var ind4 = 4;

    if (s.substr(6, 1) != "2") {
        ind2 = ind2 + 1;
        ind3 = ind3 + 1;
        ind4 = ind4 + 1;
    }

    var ndan = s.substr(0, 2);
    var nmje = s.substr(ind2, 2);
    var ngod = s.substr(ind3, ind4);

    var ns = ngod + "," + nmje + "," + ndan;

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

MVC DateTime validation - UK Date format

5 Answers5

Linked

Related