Question

我在输入字段上使用Bootstrap Datepicker（在此处找到：http://mgcrea.github.io/angular-strap/#/datepicker）。默认情况下，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
    };
}]);

问题是，datepicker会将任何键盘输入或日期选择转换为当前日期。（参见plnkr：http://plnkr.co/edit/oCZnq0UOmaxC83Rv7YSs?p=preview）我不认为这些指令应该彼此不兼容。

Answer 1

我意识到你可能已经考虑过了这个问题，但是我正在编写一个应用程序来处理很多日期（输入，修改等），我测试了很多不同的日期选择器。

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

话虽这么说，你的指令应该利用$ 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);
            });


        }
    }
});

AngularJs Bootstrap Datepicker验证

1 个答案: