AngularJs BootstrapUI 日期选择器验证

标签 angularjs validation datepicker angular-ui-bootstrap

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

如果您需要更多信息,请询问,我不知道它是否足够清楚或解释得很好。
感谢您的帮助! ;)

最佳答案

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

在此处阅读更多相关信息 NG-PATTERN DOCS

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

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

validate datepicker using ng-pattern

关于AngularJs BootstrapUI 日期选择器验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24411157/

相关文章:

javascript - Angular 场验证

javascript - 无法开始使用 Angular.js

c# - WPF:特定输入文本框(用于电话号码等)

javascript - 如何使 Pikaday 日期选择器始终可见

Angular 4 Material DatePicker 未在正确位置打开

angularjs - 如何使用angular JS显示基于另一个选择的选择值

javascript - 无法使用 Auth0/Angular 访问 Node.js 服务器中的 req.user

JQuery Validator 插件电话验证

javascript - 如何检查表单的所有字段是否已填写?

reactjs - TypeError : utils. endOfDay 不是函数