AngularJs Bootstrap Datepicker驗證

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);
});

我寫了一條指令，使用模板來標准化datepicker的輸入字段：

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日期選擇器似乎是最具有延展性和可用性的。

話雖如此，您的指令應利用$ formatters和$ parsers：

標記：

<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);
            });


        }
    }
});