剑道日期选取器最大值和最小值不限制文本输入

本文关键字：文本 输入 最小值 日期 选取 最大值 | 更新日期: 2023-09-27 18:33:49

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

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

请注意，我正在设置 .敏和.最大值。这些最小值和最大值正确地将日历下拉列表限制为正确的日期范围："9/10/2013"到"9/10/2014"。

遗憾的是，用户仍可以使用输入文本框而不是日历下拉列表输入最小和最大日期之外的日期。

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

剑道日期选取器最大值和最小值不限制文本输入

不幸的是，

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

我最初决定只向更改的事件添加验证，这样手动输入日期的功能就不会丢失，但是在手动输入日期时不会触发（！ 

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

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

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

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

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

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

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

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

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

onclickhandler : function(event) { 
      document.activeElement.blur();
}
相关文章：