c# - kendo datepicker




Kendo UI datepicker incompatible with Chrome 56 (5)

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?


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



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


Kendo DatePickerFor issue in CHROME version 56.0.2924

This fixed the problem for me: http://www.telerik.com/forums/date-field-not-rendering-correct-in-browsers-that-support-html-5

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





datepicker