AngularJs Bootstrap日期選擇器驗證

Question

我在輸入字段上使用了Bootstrap Datepicker（在這裏找到：http://mgcrea.github.io/angular-strap/#/datepicker）。默認情況下，日期選擇器允許輸入日期。如果它是有效的，那麼它設置日期。否則，它將日期設置爲當前日期。

我寫了一個使用正則表達式中的字符的日期是輸入：

maskModelCtrl.$parsers.push(function(inputValue) { 
    var val = maskRenderLogic(inputValue, mask, maxVal); 

    setAndRender(maskModelCtrl, val); 
    return maskReturnLogic(val); 
}); 

一個指令和我寫了一個指令，以規範的輸入字段與模板的日期選擇器：

angular.module('form.validation').directive('dateMask', ['$parse', function($parse) { 
    return { 
     restrict: 'E', 
     scope: { 
      date: '=' 
     }, 
     template: '<input ng-model="date" regex-mask="[^0-9 /]" max-length="10" bs-datepicker data-date-format="mm/dd/yyyy" placeholder="mm/dd/yyyy" >', 
     replace: true 
    }; 
}]); 

問題是，日期選擇器將任何鍵盤輸入或日期選擇轉換爲當前日期。 （見plnkr：http://plnkr.co/edit/oCZnq0UOmaxC83Rv7YSs?p=preview）我不認爲這些指令應該是相互矛盾的。

Answer 1

我意識到你可能已經考慮過這個問題，但我正在編寫一個處理日期（輸入，修改等）的應用程序，並且我測試了很多不同的日期選擇器。

Angular-UI Bootstrap datepicker似乎是最具延展性和可用性的。

話雖這麼說，你的指令應該利用$格式化和$解析器：

標記：

<input date-validator type="text" ng-model="date"/> 

指令

app.directive('dateValidator', function() { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function(scope, elem, attrs, ctrl) { 

      var validate = function(value) { 
       //.. do validation logic ../ 
       modifiedValue = value/2; 

       // set the validity if needed      
       ctrl.$setValidity('customDate', false); 

       //return the modified value 
       return modifiedValue; 
      } 

      // formatters fire when the model directly changes 
      ctrl.$formatters.unshift(function(value) { 
       return validate(value); 
      }); 

      // parsers fire when the model changes via input 
      ctrl.$parser.unshift(function(value) { 
       return validate(value); 
      }); 


     } 
    } 
});