日期选择器的 Kendo 自定义验证

Posted 2023-05-07

【中文标题】日期选择器的 Kendo 自定义验证

【英文标题】：Kendo custom validation for datepicker

【发布时间】：2017-04-21 12:51:05

【问题描述】：

我在使用 kendo datepicker 自定义验证时遇到问题（实际上，在网络上找到的以角度方式进行自定义验证的示例并不多）。我已经设置了 datepicker 的最小值，但它仅在用户从下拉列表中选择日期时才有效。

如果在 datepicker 的输入字段中键入日期，则最小值不会影响。我想至少向用户显示他们输入的日期无效。

但是怎么做对我来说似乎有点困惑。

这是 html 部分：（vm 是我的控制器）

<form name="myForm" kendo-validator="vm.validator" ng-submit="vm.validate($event)">
    <input id="systemValidityFrom" name="systemValidityFrom" data-type="date" kendo-date-picker
        k-options="vm.validityFromOption" k-ng-model="vm.nominationVM.ValidityFromDate" placeholder="Start date"
        required validationMessage="Enter a valid date" />

    <input type="image"
        src="/webapp/content/img/globalIcons/[e-mail]"
        name="template-save-button"
        class="template-btn"
        id="template-save-button"
        ng-click="vm.saveChanges();" />

    <label for="template-save-button">Save</label>
</form>

这是JS部分：

vm.nominationVM = ValidityFromDate: null;

vm.saveChanges = function () 
    if (vm.validator.validate()) 
        TemplateService.saveTemplate();
     
;

vm.validityFromOption = 
    min: new Date()
;

例如，如果输入的日期小于今天，我想让输入的日期无效（强制用户输入大于今天的日期）。

如果您能帮我解决这个问题，我将不胜感激。

【参考方案1】：

是的，根据 Telerik 的说法，Min 和 Max 选项仅适用于 DatePicker 的日历 (https://www.telerik.com/forums/datepicker---max-and-min)。

如果你想评估用户的直接输入，你必须在你的验证器中创建一个自定义规则，例如看看这个实现：https://demos.telerik.com/kendo-ui/validator/custom-validation