Kendo UI 日期选择器与 Chrome 56 不兼容 [英] Kendo UI datepicker incompatible with Chrome 56

问题描述

将 Chrome 更新到最新版本 56.0.2924.76(64 位)后，我们的 Kendo 日期选择器开始无法正常工作.

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

所有日期选择器都使用 ViewModel 绑定，现在它们不显示它们的值.如果我们检查它们，我们会看到值已设置，但未显示.

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.

例如:

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

如果我使用 Chrome 的开发人员工具检查此元素，则会得到以下结果:

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

但它是这样显示的

当我们使用 KnockOut 绑定属性值时，所有日期选择器都可以正常工作.

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

我们的剑道版本是:Kendo UI Complete v2012.2.913

Our Kendo version is: Kendo UI Complete v2012.2.913

还有其他方法可以绑定吗?我们应该使用 Chrome v.56 改变什么?

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

推荐答案

目前，DatePicker 包装器呈现 INPUT 元素类型日期".当 Kendo DatePicker 在客户端上初始化时，它将输入的类型更改为文本".因此，我们避免了日期"的本地渲染.输入.如果 JavaScript 被禁用，那么 Kendo DatePicker 将不会被初始化，输入可以作为原生输入使用.

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.

不幸的是，有些浏览器原生支持date"type(特别是 Chrome)验证设置的值，如果它的格式不正确([RFC 3339] 中定义的有效完整日期)，则它被忽略.现在，您可以将输入的类型更改为文本".永久避免任何与本机输入相关的问题:

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

我只是根据 kendo UI 论坛中的建议添加属性 type=text" 并且它对我有用.

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

这是一个链接:http://www.telerik.com/forums/date-field-not-rendering-correct-in-browsers-that-support-html-5

这篇关于Kendo UI 日期选择器与 Chrome 56 不兼容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！