CODEWITHSUNDEEP
c#jqueryasp.net-mvcgoogle-chromedatepicker
Cristiano
Cristiano

Reputation: 3189

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

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:

[Display(Name = "Date")]
[DataType(DataType.Date)]
public DateTime Date { get; set; }

My View:

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

$(document).ready(function () {
    $('.picker').datepicker({
        dateFormat: 'dd.mm.yy',
        changeMonth: true,
        changeYear: true,
        selectOtherMonths: true
    });
});

Everything works in Opera and Firefox but Chrome doesn't like this type of date. I'm constantly getting the following error The field 'Date' must be a date.

Any ideas?

UPDATE

It seems there is a problem when the code is inside a partial view. When I copy that code to a main page, validation works fine.

I'm inserting partial view inside my main View simply like this:

@Html.Partial("_CreateOrEdit", Model)

And that code above is inside a partial view:

@model Pro.Web.Models.Model

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


$(document).ready(function () {
$('.picker').datepicker({
    dateFormat: 'dd.mm.yy',
    changeMonth: true,
    changeYear: true,
    selectOtherMonths: true
});

</script>
});

UPDATE2

It doesn't work after all. Sometimes it works, sometimes not. I clicked a couple of times on dates and sometimes validation passes. For the same date there could be good and wrong validation.

This is output html for date field:

<div class="editor-field">
<input class="picker" data-val="true" data-val-date="The field Date must be a date." data-val-required="The Date field is required." id="date" name="Item.Date" type="text" value="1.1.0001. 0:00:00" />
<span class="field-validation-valid" data-valmsg-for="Item.Date" data-valmsg-replace="true"></span>
</div>

Upvotes: 26

Views: 53499

Answers (6)

hispeed
hispeed

Reputation: 171

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" } })

Upvotes: 0

Istv&#225;n
Istv&#225;n

Reputation: 151

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); }

Upvotes: 5

chassis
chassis

Reputation: 84

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!

Upvotes: 2

user3096151
user3096151

Reputation: 191

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");

Upvotes: 19

Hubo
Hubo

Reputation: 170

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.

Upvotes: 1

Piotr Stapp
Piotr Stapp

Reputation: 19830

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?

Upvotes: 11

Related Questions