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

Question

Я хотел бы создать директиву, которая проверяет нулевой ввод в HTML-поле даты, и если он имеет нулевое значение, то сбросить его на текущую дату. У меня нет проблем сделать эту проверку с помощью 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 (Иерусалимское летнее время)" не соответствует требуемому формату "гггг-мм-дд".

Как правильно сбросить поля даты?

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>

обновленный плункер с обоими ответами: 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);
    }
  }
});

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