ASP.Net MVC4: The field xxx must be a date

Question

I have a problem with EditorFor(DateTime) function. I have a model defined like this:

    [MetadataType(typeof(MessageSearchDTO_Validation))]
    public class MessageSearchDTO
    {
        public DateTime StartDate { get; set; }
        public DateTime EndDate { get; set; }
    }

    public class MessageSearchDTO_Validation
    {
        [DisplayName("Od")]
        [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd HH:mm}")]
        [Required(ErrorMessage = ErrorMessages.FieldRequired)]
        public DateTime StartDate { get; set; }

        [DisplayName("Do")]
        [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd HH:mm}")]
        [CustomValidation(typeof(MessageSearchDTO_Validation), "EndDate_CustomValidator")]
        [Required(ErrorMessage = ErrorMessages.FieldRequired)]
        public DateTime EndDate { get; set; }
}

The problem is that I want a full date with time editor. But it works only in Chrome. In FF/IE I'm getting this javascript validation error. If I set the value of "10/23/2013 12:00:00 AM" it works fine. But how do I force the datetime format I desire?

I even tried to implement custom binder, it didn't work because this is client side error...

score 6 · Answer 1 · edited May 23 '17 at 12:30

6

I guess this answer might solve your problem

Changing the date validation method in jQuery.validate.js to the follwing solved the issue:

date: function (value, element) {
         $.culture = Globalize.culture("en-GB");
         var date = Globalize.parseDate(value, "dd/MM/yyyy", "en-GB");
         return this.optional(element) || 
                        !/Invalid|NaN/.test(new Date(date).toString());
     }

Modify them based on your requirement

edited May 23 '17 at 12:30

Community

1
1

answered Oct 23 '13 at 05:31

AthibaN

2,087
1
15
22

DO I need to add `Globalize` file or function ? – Chlebta May 08 '14 at 10:26
This is worked perfect for me. I was facing this issue in Safari browser. – Liladhar Jan 14 '15 at 13:05

score 0 · Answer 2 · answered Oct 23 '13 at 07:00

What helped me was:

    date: function (value, element) {
        if (value.indexOf(' ') != -1)
            value = value.replace(' ', 'T');
        return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
    },

I do not like it very much :( Isn't it possible to do it some nice way without modifying jquery???

score 0 · Answer 3 · answered Nov 21 '16 at 07:52

AthibaN's answer is correct. You need to include globalize.js and globalize.yourRegionHere.js

My solution is to add in layout file after jquery is loaded script tag with

  $(function () {
                    $.validator.methods.date = function (value, element) {
                     Globalize.culture("bs-Latn-BA");

             return this.optional(element) || Globalize.parseDate(value)     !== null;
                }
            });

This way its less intrusive.

score -1 · Answer 4 · edited May 23 '17 at 12:13

-1

Send ticks (DateTime.Ticks) instead of datetime string to client side. Then parse ticks to the date format you want with javascript.

This answer can help.

edited May 23 '17 at 12:13

Community

1
1

answered Oct 22 '13 at 22:00

mehmet mecek

2,615
2
21
25

Send ticks? The question is about client-side validation before send data back to the server. – Black Frog Oct 23 '13 at 02:44
I mean if you transfer dates using ticks, you can handle it whatever browser you use. As I understood you are sending dates as string like "10/23/2013 12:00:00 AM", this may not be a generic format between browsers, however ticks is generic. Thank you. – mehmet mecek Oct 23 '13 at 07:53

ASP.Net MVC4: The field xxx must be a date

4 Answers4