Kendo UI datepicker incompatible with Chrome 56

Question

After updating Chrome to its last version 56.0.2924.76 (64-bit), our Kendo datepickers started not to work properly.

All datepickers were binded using ViewModels, and now they don't show their values. If we inspect them we see the value is set, but it's not been shown.

For example:

@(Html.Kendo().DatePicker()
                    .Name("DateFrom")
                    .Start(CalendarView.Month)
                    .Depth(CalendarView.Month)
                    .Format("MM/dd/yyyy")
                    .HtmlAttributes(new { @id = "ClosingStartDate", @placeholder = "enter date from", @class = "masked-date" }))

If I inspect this element with Chrome's Developer tool I have this result:

<input class="k-input masked-date" id="ClosingStartDate" name="DateFrom" placeholder="enter date from" type="text" value="12/21/2016" data-role="datepicker" readonly="" disabled="disabled" maxlength="20" style="width: 100%;">

But it's show like this

When we bind property value with KnockOut all datepickers work fine.

Our Kendo version is: Kendo UI Complete v2012.2.913

Is there another way to bind it? What we should change using Chrome v.56?

Answer 1

Currently, the DatePicker wrapper renders INPUT element type "date". When the Kendo DatePicker initializes on the client it changes the type of the input to "text". Thus we avoid the native rendering of the "date" input. ​If the JavaScript is disabled, then the Kendo DatePicker will not be initialized and the input can be used as native one.

Unfortunately, some browsers with native support for "date" type (Chrome in particular) validate the set value and if it is not in the correct format (a valid full-date as defined in [RFC 3339]) then it is ignored. For now you can change the type the input to "text" permanently and avoid any issues related with the native inputs:

@(Html.Kendo().DatePicker()
.Name("datepicker")
.Value("10/10/2011")
.HtmlAttributes(new { type = "text" }))

I just add attribute type="text" based on the suggestion in kendo UI forum and it works for me.

Here's a link: http://www.telerik.com/forums/date-field-not-rendering-correct-in-browsers-that-support-html-5

Answer 2

I able to fix this by adding a format to DatePicker(), try this

@(Html.Kendo().DatePicker()
 .Name("dateReturn")
 .Format("yyyy-MM-dd")
 .Value(DateTime.Today)
 .Min(DateTime.Today)
 ...............
)