13

I have a warning on my page about of an invalid date format as you can see below. The warning is generated by Kendo UI DatePicker component. I can't find a solutions on the web, my app is localized pt-BR. How to solve this problem.

<p>@(Html.Kendo().DatePicker().Name("periodoDocumento").Value(DateTime.Now))</p>

Error in Google Chrome:

The specified value '06/07/2015' does not conform to the required format, 'yyyy-MM-dd'.

I must use day-month-year format for my client needs.

MJDS Assessoria
  • 131
  • 1
  • 4

4 Answers4

19

I found solution:

@(Html.Kendo().DatePicker().Name("periodoDocumento").Value(DateTime.Now).HtmlAttributes(new { @type = "" }))

So jquery will stop parsing this field as date with default format.

Mistyukov Dima
  • 191
  • 1
  • 5
  • That worked for me. I guess chrome is taking the `type="date"` and trying to do it's own date picker, which generates the warning since it is not a valid date format that chrome supports, even though Kendo deals with it properly. – KallDrexx Dec 21 '15 at 20:23
  • This nailed it for me. Thank you. – Ben Thomson Feb 15 '17 at 15:54
6

Setting the field's type to text prevents the browser, and jQuery Validator from treating it as a date. This is a little cleaner than specifying an invalid input type format (like empty string).

@(Html.Kendo().DatePicker()
    .Name("DateFieldName")
    .Value(Model.DateFieldName)
    .HtmlAttributes(new { @type=  "text"})
    )

However, this is still a bit of a hack - it just suppresses the validation done by your browser and/or validation tools upon date fields. The better solution (suitable for a long-term fix) is to ensure the date strings populating these date fields conform to the HTML5 date field living standard spelled out in the ISO 8601, e.g., 2017-02-10

Also reference this newer question, specifically about Chrome now requiring correct formatting on HTML5 date fields.

Kendo UI datepicker incompatible with Chrome 56

Community
  • 1
  • 1
Tim Grant
  • 3,300
  • 4
  • 23
  • 31
2

Add the format property:

@(Html.Kendo().DatePicker().Format("dd/MM/yyyy").Name("periodoDocumento").Value(DateTime.Now))

http://docs.telerik.com/kendo-ui/api/javascript/ui/datepicker#configuration-format

Steve Greene
  • 12,029
  • 1
  • 33
  • 54
  • The error persists, also auditioned with DMY in .format, since the date is DMY. But without success. – MJDS Assessoria Jul 06 '15 at 19:11
  • 1
    Is the error only in Chrome? http://www.telerik.com/forums/support-input-error-using-latest-chrome-dev-build – Steve Greene Jul 06 '15 at 19:21
  • Yes, only in chrome, but i'm not using canary, i'm using Chrome, version 43.0.2357.130. – MJDS Assessoria Jul 06 '15 at 20:30
  • Not that it should matter, but my setup is @(Html.Kendo().DatePickerFor(model => model.MyDate).Format("dd/MM/yyyy") I don't use the name or value properties and populate the initial model value in the controller. Might want to check Chrome Dev tools to see what's going on. – Steve Greene Jul 06 '15 at 20:39
2

Just add this .HtmlAttributes(new { type = "text" })

Apollo
  • 1,990
  • 12
  • 44
  • 65