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

Question

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

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

例如：

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

<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

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

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

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

Answer 1

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

不幸的是，一些原生支持“日期”类型的浏览器（尤其是 Chrome）会验证设置值，如果它的格式不正确（[RFC 3339] 中定义的有效完整日期），那么它是忽略。现在，您可以将输入的类型永久更改为“文本”，并避免与本机输入相关的任何问题：

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

我只是根据剑道用户界面论坛中的建议添加属性type="text"，它对我有用。

这是一个链接：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)
 ...............
)