AngularJs BootstrapUI 日期选择器验证答案

【问题标题】：AngularJs BootstrapUI Datepicker validationAngularJs BootstrapUI 日期选择器验证
【发布时间】：2014-06-25 14:17:49
【问题描述】：

我需要验证日期选择器的日期并限制年份（例如避免 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 等。

如果您需要更多信息，请直接询问，我不知道它是否足够清楚或解释清楚。感谢您的帮助！ ;)

【问题讨论】：

我浏览了 Google 和 stackoverflow 并没有找到任何可以使它工作的东西。我还在寻找。
"angular bootstrap datepicker validation" 给了我很多结果，其中一些非常相关。
试过了，没用。实际上我还在尝试，修改等等。
尝试使用 angular-strap 日期选择器，它允许您设置最大值和最小值等
我去试试，我告诉你！谢谢！ :D

标签： angularjs validation datepicker angular-ui-bootstrap

【解决方案1】：

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

在此处了解更多信息NG-PATTERN DOCS

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

看看这个fiddle有更好的解决方案

validate datepicker using ng-pattern

【讨论】：

不错。我会给你+1。这件作品已经完成了。但我查看了 ng-pattern 并提供了一种解决问题的好方法。谢谢。
ng-pattern 不适用于 datepicker，因为 ngModel 已更改为日期对象而不是字符串
任何仍在阅读这个过时线程的人都应该知道 datepicker 组件现在具有内置验证。查看文档，留意“格式”变量

【解决方案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);
         }
     };
});

仍然无法确定最小日期和最大日期，但并不紧急。希望它可以帮助人们解决未来的问题。

【讨论】：

使用内置角度指令更容易做到这一点

【解决方案3】：

您的解决方案使用 'scope.$watch' 来完成 ngModel 的 '$parsers' 和 '$formatters' 的构建。看看这里： https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

【讨论】：

没有 ngModel.$parse
哇，你是对的......编辑以引用正确的方法。