angular 日期验证指令

Question

我想创建一个检查 null 的指令在 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">

当日期为空时，例如我删除年份时，我在控制台中收到错误消息：

The specified value "Sun Sep 18 2016 21:41:34 GMT+0300 (Jerusalem Daylight Time)" does not conform to the required format, "yyyy-MM-dd".

重置日期字段的合适方法是什么？

谢谢

Answer 1

您不需要指令，只需使用 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();
  }
});

笨蛋：http://plnkr.co/edit/32Ny4rnPreK2dGC5GMFo?p=preview

Answer 2

指令解：

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

还有一个指令，它向元素添加了 ng-blur

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>

笨蛋：http://plnkr.co/edit/U9KtoffbnCXNeAWcWLEC?p=preview

angular 日期验证指令

angular directive for date validation

javascript

directive

date

angularjs