Kendo对datepicker的自定义验证

Question

I'm having problem with kendo datepicker custom validation (There is actually not many examples found on the web for custom validation in angular way). I have set the min value of the datepicker but it only works if the user choose the date from the dropdown.

If the date is typed in the input field of datepicker the min value can not affect. I want to at least show the user that they have entered an invalid date.

But it seems a bit confusing for me how to do it.

this is the html part: (vm is my controller)

<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/save_icon@1x.png"
        name="template-save-button"
        class="template-btn"
        id="template-save-button"
        ng-click="vm.saveChanges();" />

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

This is the JS part:

vm.nominationVM = {ValidityFromDate: null};

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

vm.validityFromOption = {
    min: new Date()
};

For example I want to make the entered date invalid if it is less than today (forcing the user to type a date greater than today).

I'd be grateful if you can help me with this issue.

Answer 1

Yes, according to Telerik, the Min and Max options are applied only on the DatePicker's calendar ( https://www.telerik.com/forums/datepicker---max-and-min ).

If you want to evaluate the direct input of the user, you'll have to create a custom rule in your validator, for an example look at this implementation: https://demos.telerik.com/kendo-ui/validator/custom-validation