Kendo AngularJS DatePicker custom validation

Question

How do I get custom validation working for the Kendo Angular directive DatePicker? I want to implement the following example but using the Angular directive version of the DatePicker:

KendoUI DatePicker validation when multiple date fields are on a page

Any help would be appreciated.

Answer 1

This is how I implemented a custom Datepicker based on KEndo's Datepicker with my own template and validation :

appModule.directive('nemoDatePicker', function () {
    return {
        restrict: 'E',
        require: '?ngModel',
        scope: {
            'name': '@',
            'text': '@',
            'ngModel': '=',
        },
        templateUrl: '/App/nemo/nemoDatePicker.html',
        link: function (scope, element, attrs, ngModel) {
        },
        controller: function ($scope) {
            $scope.error = function (name) {
                var s = $scope.editor[name];
                return $scope.editor.$invalid && $scope.editor.$dirty ? "has-error" : "";
            };
        }
    };
});


appModule.directive('kendoDateValidator', ['$sce', function ($sce) {
    return {
        restrict: 'A', // only activate on element attribute
        require: '?ngModel', // get a hold of NgModelController
        link: function (scope, element, attrs, ngModel) {
            if (!ngModel) return; // do nothing if no ng-model
            
            // Specify how UI should be updated
            ngModel.$render = function () {
                //element.html($sce.getTrustedHtml(ngModel.$viewValue || ''));
            };

            // Listen for change events to enable binding
            element.on('blur keyup change', function () {
                scope.$evalAsync(read);
            });

            read(); // initialize

            function read() {
                
                if (!element.val()) return;
                const startTime = performance.now();
                if (!isDate(element.val()))
                {
                    //console.log(element.val() + " bad");
                    ngModel.$setValidity('date', false);
                }
                else
                {
                    //console.log(element.val() + " good");
                    ngModel.$setValidity('date', true);
                }
                const duration = performance.now() - startTime;
                //console.log("read took " + duration + " ms");
            }

            function isDate(x) {
                var d = kendo.parseDate(x, "dd/MM/yyyy");
                return d instanceof Date;
            };

        }
    };
}]);

<div ng-form="editor">
    <div class="Box" ng-class="error(name)">
        <div class="SubTitle">
            <div class="DirectiveIcon1">
                <span class="glyphicon glyphicon-calendar"></span>
            </div>
            {{text}}
        </div>
        <input kendo-date-picker
               culture="he-IL"
               k-format="'dd/MM/yyyy'"
               id="{{name}}"
               name="{{name}}"
               ng-model="ngModel"
               required 
               kendo-Date-Validator
               class="form-control"/>
        <div>
            <div>
                <span class="help-block" ng-show="editor.$error.required && editor.$dirty">שדה חובה</span>
                <span class="help-block" ng-show="editor.$error.date">יש להזין תאריך</span>
            </div>
        </div>
    </div>
</div>