Question

我在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的解决方案来强制执行datepicker的最大和最小范围，无论如何用户如何输入日期。

Answer 1

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

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

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

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

Answer 2

Razor呈现了一个Kendo UI DatePicker。键入时，DatePicker不会限制用户输入。

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

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

Answer 3

如果在HtmlAttributes部分中添加onkeydown调用

，它也可以工作

"SELECT top 1 EIDCardNumber FROM [dbo].[_User] where DisplayName = @name"

这样，在禁用手动用户输入时，日历仍然可以点击。

Answer 4

您可以做一件事。如果您在Kendo Mobile中，只需禁用显示键盘即可。您可以在日期选择器输入的Onclick方法中使用此行

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

Kendo DatePicker Max和Min值不限制文本输入

4 个答案: