3

我在 MVC 应用程序的页面上有一个 Kendo DatePicker 控件：

@(Html.Kendo().DatePicker()
    .Name("PlanStartDate")
    .HtmlAttributes(new { @class = "reportParam" })
    .Value(Model.MinDate)
    .Min(Model.MinDate.ToShortDateString())
    .Max(Model.MaxDate.ToShortDateString())
)

请注意，我正在设置 .Min 和 .Max 值。这些最小值和最大值正确地将日历下拉限制在正确的日期范围内：“2013 年 9 月 10 日”到“2014 年 9 月 10 日”。

不幸的是，用户仍然可以使用输入文本框而不是日历下拉菜单来输入最小和最大日期之外的日期。

我知道我可以添加 JavaScript 以在控件的 kendoValidator 对象上创建规则和消息，但我正在寻找最简单的、希望仅限 Razor 的解决方案来强制日期选择器上的最大和最小范围，无论用户如何输入日期。

4

4 回答 4

3

不幸的是，仍然没有任何东西可以在 Razor 中设置。我找到的唯一解决方案是在初始化 widged后将输入设置为只读。这确保用户不能手动输入任何日期，并且他们使用选择器控件。我尝试通过添加到 HtmlAttributes 来设置剃刀语法中的属性，但这与在小部件上设置只读的结果相同，即禁用输入和选择器。

我最初决定只向更改的事件添加验证，以便手动输入日期的能力不会丢失，但是当手动输入日期时不会触发（！）

$(function() {
            $("#startDate").prop("readonly", "readonly");
        });

在这里找到解决方案：http ://www.telerik.com/forums/kendo-datepicker-max-and-min-values-not-limiting-text-entry#Mr13l7RaiUeA8Nm9cVo7hQ

于 2015-11-11T16:45:53.330 回答
0

Razor 渲染一个 Kendo UI DatePicker。DatePicker 在键入时不会限制用户输入。

http://demos.telerik.com/kendo-ui/web/datepicker/rangeselection.html

您可以设置“只读”属性，该属性将完全禁用用户输入并强制他们使用 UI。

于 2014-02-04T19:52:02.003 回答
0

你可以做一件事。如果您在 kendo mobile 中，只需禁用键盘显示即可。您可以在 datepicker 输入的 Onclick 方法中使用此行

onclickhandler : function(event) { 
      document.activeElement.blur();
}
于 2018-11-14T13:30:06.960 回答
0

如果您在 HtmlAttributes 部分中添加 onkeydown 调用，它也可以工作

.HtmlAttributes(new { onkeydown = "javascript: return false; " })

这允许日历在禁用手动用户输入的同时仍可单击。

于 2017-11-29T20:45:34.890 回答