The field must be a date - DatePicker validation fails in Chrome - mvc

Question

I have strange problem. My date validation doesn\'t work in Chrome. I\'ve tried this answer but it didn\'t work for me.

I have this in my model:

[Dis         


        

Answer 1

I had the same error. Solved it by applying datetime as the type,

 @Html.EditorFor(model => model.LineResetAllowStartDate, new { htmlAttributes = new { @class = "form-control" ,  @type = "datetime" } })

similarly use time for only time

 @Html.EditorFor(model => model.LineResetAllowStartDate, new { htmlAttributes = new { @class = "form-control" ,  @type = "time" } })

Answer 2

In my opinion problems is that MVC is generating for date HTML5 input with [type=date]. This causes that in chrome valid date format is same same as system date format.

You can probably set date format in MVC to be common with JqueryUI using following attribute:

[DataType(DataType.Date), DisplayFormat( DataFormatString="{0:dd.MM.yy}", ApplyFormatInEditMode=true )]

The second idea is to use code from article: Creating a Native HTML 5 Datepicker with a Fallback to jQuery UI

One more thing. There is a good topic about date in html input: Is there any way to change input type="date" format?

Answer 3

I solved it by removing the validation attribute

@model Pro.Web.Models.Model

<div class="editor-field">
@{ Html.EnableClientValidation(false); }
@Html.TextBoxFor(model => model.Item.Date, new { @class = "picker" })
@Html.ValidationMessageFor(model => model.Item.Date)
@{ Html.EnableClientValidation(true); }

Answer 4

It is kind of late to crash to the party after a year, but I've tried every solution I could find regarding this error, and none of them helped. So for anyone struggling like myself here is what solved this issue.

Add to the end of jquery.validate.globalize.js and its minified version(depends on what you are using) this little snippet of code.

... 
   $.validator.methods.range = function (value, element, param) {
        var val = Globalize.parseFloat(value);
        return originalMethods.range.call(this, val, element, param);
    };


}(jQuery, Globalize));

Globalize.culture("en-GB");

Of course, use your own culture settings inside quotation marks.

Hope it helps!

Answer 5

The problem seems to be with <input type="date" /> (HTML5) as specification says that valid value is defined as RFC3339.

So I changed my View to something like this:

<script>
    $(function () {
         $("#validfrom").datepicker({
             altField: "#ValidFrom",
             altFormat: "yy-mm-dd"
         });
    });
</script>

<div class="editor-label">
    @Html.LabelFor(model => model.ValidFrom)
</div>
<div class="editor-field">
    <input id="validfrom" type="text" name="validfrom" />
    @Html.HiddenFor(model => model.ValidFrom)
    @Html.ValidationMessageFor(model => model.ValidFrom)
</div>

Hope it helps.

Answer 6

Exact the same situation here (partial view)

I solved it by removing the validation attribute and perform validation at server side:

$('#date').removeAttr("data-val-date");