Kendo AngularJS DatePicker自定义验证

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>