日付検証のためのangularディレクティブ

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"> 

と私は例えば年に消去する場合、 は、私はエラーを取得するように日付がnullでありますコンソール：

指定された値 "Sun Sep 18 2016 21:41:34 GMT + 0300（エルサレム夏時間）"に準拠していません必要な形式 "yyyy-MM-dd"。

日付フィールドをリセットする適切な方法は何ですか？

ありがとう

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

要素にNG-ブラーを追加し、別のディレクティブ、

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