Угловая директива для проверки даты

Question

Я хотел бы создать директиву, которая проверяет значение ввода на дату, указанную в html, и если она имеет значение null, то переустановите ее на текущую дату. У меня нет проблем с этой проверкой с ng-change.

HTML код:

<input type="date" class="form-control" id="birthDate" 
       ng-model="vm.bDate" ng-change="vm.dateValid(vm.bDate)"> 

И код в контроллере:

function dateValid(date) { 
    vm.bDate = date || new Date(); 
} 

Этот код работать прекрасно, но так как у меня есть много полей даты в моем приложении я хотел бы сделать, получить тот же результат с директивой.

Так я реализовать директиву:

$element.on('blur', function() { 
    var pDate = Date.parse($ctrl.$modelValue); 
    if (isNaN(pDate) === true) { 
    $ctrl.$setViewValue(new Date()); 
    $ctrl.$render(); 
    } 
}); 

И в HTML:

<input type="date" class="form-control" id="birthDate" valid-date="" 
       ng-model="vm.bDate"> 

И когда дата равна нуль, как, когда я стираю год, например, я получаю сообщение об ошибке в консоль:

Указанное значение «Sun Sep 18 2016 21:41:34 GMT + 0300 (Jerusalem Daylight Time)» не соответствует требуемый формат, «yyyy-MM-dd».

Каков подходящий способ сброса полей даты?

Thanx

Answer 1

Директива решение:

app.directive('validDate', function ($timeout) { 
    return { 
    scope: { 
     ngModel: '=' 
    }, 
    bindToController: true, 
    controllerAs: 'vm', 
    link: function (scope, element, attrs, ctrl) { 
     element.on('blur', function() { 
     // using timeout instead of scope.$apply, notify angular of changes 
     $timeout(function() { 
      ctrl.ngModel = ctrl.ngModel || new Date(); 
     }); 
     }); 
    }, 
    controller: function() {} 
    } 
}); 

HTML:

<input type="date" 
     class="form-control" 
     id="birthDate2" 
     ng-model="vm.bDate" 
     valid-date> 

обновленный plunker с обоих ответов: http://plnkr.co/edit/32Ny4rnPreK2dGC5GMFo?p=preview

Еще одна директива, которая добавляет нг-размытости к элементу

JS

app.directive('vd', function ($compile) { 
    return { 
    link: function (scope, element) { 
     element.attr('ng-blur', 'vm.dateValid()'); 
     $compile(element)(scope); 
    } 
    } 
}); 

. (. Новый Date() toLocaleDateString()):

HTML

<input type="date" 
     class="form-control" 
     id="birthDate2" 
     ng-model="vm.bDate" 
     vd> 

plunker http://plnkr.co/edit/U9KtoffbnCXNeAWcWLEC?p=preview

Answer 2

вам не нужны директивы, просто проверить введенные данные с ng-blur:

HTML

<input type="date" 
     class="form-control" 
     id="birthDate2" 
     ng-model="vm.bDate" 
     ng-blur="vm.dateValid()"> 

JS

app.controller('MainCtrl', function($scope) { 
    var vm = this; 

    vm.bDate = new Date(); 

    vm.dateValid = function() { 
    vm.bDate = vm.bDate || new Date(); 
    } 
}); 

plunker: http://plnkr.co/edit/32Ny4rnPreK2dGC5GMFo?p=preview