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

话虽如此，您的指令应该利用 $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);
            });


        }
    }
});