Kendo UI 日期选择器与 Chrome 56 不兼容

Question

将 Chrome 更新到版本 56.0.2924.76（64 位）后，我们的 Kendo 日期选择器停止工作。

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

例如：

@(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 的 Developer 工具检查这个元素，我会得到这样的结果：

<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 绑定时，所有日期选择器都可以正常工作。

我们的Kendo版本是：KendoUI完整v2012.2.913

还有其他绑定方式吗？我们应该使用 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" }))

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

这里是 link：http://www.telerik.com/forums/date-field-not-rendering-correct-in-browsers-that-support-html-5

Answer 2

我可以通过向 DatePicker() 添加格式来解决这个问题，试试这个

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

Kendo UI 日期选择器与 Chrome 56 不兼容

Kendo UI datepicker incompatible with Chrome 56

c#

google-chrome

kendo-ui

datepicker

html-input