Kendo DatePicker 最大值和最小值不限制文本输入

Posted 2023-05-07

【中文标题】Kendo DatePicker 最大值和最小值不限制文本输入

【英文标题】：Kendo DatePicker Max and Min values not limiting text entry

【发布时间】：2013-10-09 05:33:18

【问题描述】：

我在 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 值。这些最小值和最大值正确地将日历下拉列表限制在正确的日期范围内：“9/10/2013”​​到“9/10/2014”。

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

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

【参考方案1】：

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

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

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

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

【参考方案2】：

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

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

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

【参考方案3】：

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

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

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

【参考方案4】：

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

onclickhandler : function(event)  
      document.activeElement.blur();