AngularJs BootstrapUI Datepicker驗證

Question

我需要驗證datepicker的日期並限制年份（例如，避免15-05-9999）。

這是我的HTML代碼：

 <p class="input-group">
                        <input type="text" name="raisedOnDate" class="form-control" ng-model="date" ng-disabled="!viewSearchEvent.raisedOnActive"
                               datepicker-popup="{{format}}" is-open="opened1" datepicker-options="dateOptions" date-validator required />
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default" ng-click="open($event,'on')"><i class="glyphicon glyphicon-calendar"></i></button>
                        </span>
                    <p ng-show="!searchEventsForm.$valid" style="color: red;">Date is invalid!</p>
                    <p ng-show="searchEventsForm.$valid" style="color: green;">Date is valid!</p>

這是在<form name="searchEventsForm" role="form" class="form-horizontal" novalidate> 。

我做了這個指令來驗證日期類型：

app.directive('dateValidator', function() {
return {
    require: 'ngModel',
    link: function (scope, elem, attr, ngModel) {
        function validate(value) {

            var d = Date.parse(value);

            // it is a date
            if (isNaN(d)) { // d.valueOf() could also work
                ngModel.$setValidity('valid', false);
            } else {
                ngModel.$setValidity('valid', true);
            }
        }

        scope.$watch(function () {
            return ngModel.$viewValue;
        }, validate);
    }
};

}）;

但是，我可以輸入25-05-999999999之類的日期，這不是主意。

我設法讓它工作，所以如果它是一個日期，它會顯示一條消息，說“日期有效”，如果不是“日期無效”。

但我被困在那里。

關於如何設置年限和字符限制並使其有效的任何想法？

我已經嘗試過max-date ， max等。

如果你需要更多的信息，我不知道它是否足夠清楚或解釋清楚。 感謝您的幫助！ ;）

Answer 1

為什么不使用ng-pattern？ 而不是制定新的指令。

在這里閱讀更多關於它的NG-PATTERN DOCS

 ng-pattern="/^(\d{4})-(\d{2})-(\d{2})$/"

看看這個小提琴有一個更好的解決方案

使用ng-pattern驗證datepicker

Answer 2

使用這個：html上的maxlength="10"來限制字符。

這是為了驗證日期格式是否正確（避免1/1/1或11/06/201）：

MyDirective.directive('dateValidator', function() {
     return {
         require: 'ngModel',
         link: function (scope, elem, attr, ngModel) {
             function validate(value) {
                 if (value !== undefined && value != null) {
                     ngModel.$setValidity('badDate', true);
                     if (value instanceof Date) {
                         var d = Date.parse(value);
                         // it is a date
                         if (isNaN(d)) {
                             ngModel.$setValidity('badDate', false);
                         }
                     } else {
                         var myPattern = new RegExp(/^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/);
                         if (value !='' && !myPattern.test(value)) {
                             ngModel.$setValidity('badDate', false);
                         }
                     }
                 }
             }

             scope.$watch(function () {
                 return ngModel.$viewValue;
             }, validate);
         }
     };
});

仍然無法確定最小日期和最長日期，但並不緊急。 希望它可以幫助人們解決未來的問題。

Answer 3

您的解決方案使用'scope。$ watch'來執行ngModel的'$ parsers'和'$ formatters'。 看看這里： https ： //docs.angularjs.org/api/ng/type/ngModel.NgModelController