AngularJs BootstrapUI日期选择器验证

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以及其他方法。

如果您需要更多信息，请问我，不知道是否清楚或解释得好。

感谢您的帮助！;)

- SrAxi

---

我已经浏览了Google和stackoverflow，但没有找到任何可以使这个工作的东西。不过我还在继续寻找。 - SrAxi

"angular bootstrap datepicker 验证" 给我很多结果，其中一些非常相关。 - Sergiu Paraschiv

试过了，没用。其实我还在尝试着，修改之类的。 - SrAxi

尝试使用Angular-Strap日期选择器，它允许您设置最大值和最小值等。 - M21B8

我会尝试一下，然后告诉你！谢谢！:D - SrAxi

Answer 1

你为什么不使用ng-pattern？？而是要创建一个新的指令。

在这里阅读更多关于NG-PATTERN DOCS的内容。

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

请看这个 jsfiddle，它提供了更好的解决方案。

使用 ng-pattern 验证日期选择器

- ppollono

---

好的。我会给你一个+1。这个工作已经完成了。但是我看了一下ng-pattern，它提供了一个很好的解决问题的方法。谢谢。 - SrAxi

ng-pattern与datepicker不兼容，因为ngModel已被更改为日期对象而非字符串。 - Raymond Wang

任何仍在阅读这个过时的线程的人都应该知道，现在日期选择器组件已经具有内置验证功能。查看文档，注意“formats”变量。 - Jay K

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

目前还没有设定最小日期和最大日期，但这不是很紧急的问题。希望这篇文章能够帮助到未来遇到类似问题的人。

- SrAxi

---

这是使用内置的Angular指令更容易完成的事情。 - ppollono

Answer 3

你的解决方案使用'scope.$watch'来完成ngModel的'$parsers'和'$formatters'所设计的功能。请参考这里： https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

- gkl

---

没有ngModel.$parse。 - Sam

哇，你是正确的...已经编辑以引用正确的方法。 - gkl