AngularJs BootstrapUI Datepicker validation

Question

I need to validate the date of the datepicker and also limit the years (avoid 15-05-9999 for example).

This is my HTML code:

 <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>

This is inside a <form name="searchEventsForm" role="form" class="form-horizontal" novalidate>.

I made this directive to validate date type:

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

});

But, I can enter dates like 25-05-999999999, and that is not the idea.

I managed to make it work so if it is a date it shows a message saying "Date is valid" and if not "date is invalid".

But I'm stuck there.

Any ideas on how can I put year limit and character limits and make it work?

I tried already with max-date, max, and others.

If you need more info just ask, I don't know if it is clear enough or well explained. Thank you for the help! ;)

I have browsed Google and stackoverflow and didn't find anything that make this work. I'm still looking tho. — SrAxi
– SrAxi, Commented Jun 25, 2014 at 14:18
"angular bootstrap datepicker validation" gives me a lot of results, some of them pretty relevant. — Sergiu Paraschiv
– Sergiu Paraschiv, Commented Jun 25, 2014 at 15:01
Tried them, didn't work. I'm still trying them actually, modifying and so on. — SrAxi
– SrAxi, Commented Jun 25, 2014 at 15:06
try the angular-strap datepicker, that allows you to set a max-value and a min-value etc — M21B8
– M21B8, Commented Jun 25, 2014 at 15:16

ppollono · Accepted Answer · 2015-12-11 23:11:27Z

7

Why dont you use ng-pattern?? instead of making a new directive.

3 Comments

SrAxi Over a year ago

Nice. I will give you a +1. The piece of work is way finished. But I had a look to ng-pattern and offers a good way to approach the issue. Thanks.

Raymond Wang Over a year ago

ng-pattern does not work with datepicker because the ngModel has been changed into date object instead of string

Jay K Over a year ago

Anyone still reading this outdated thread should know that the datepicker component now has built-in validation. View the docs, keep an eye out for the "formats" variable

Community · Accepted Answer · 2015-02-19 16:48:34Z

6

used this: maxlength="10" on the html to limit characters.

and this is to validate the date format is correct (avoid 1/1/1, or 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);
         }
     };
});

Still didn't manage to fix a min date and max date, but is not urgent. Hope it can help people in future issues.

edited Feb 19, 2015 at 16:48

CommunityBot

11 silver badge

answered Jun 27, 2014 at 8:42

SrAxi

20.1k11 gold badges50 silver badges65 bronze badges

1 Comment

ppollono Over a year ago

This is something easier to do with build in, angular directives

gkl · Accepted Answer · 2017-03-06 15:01:35Z

-1

Your solution uses 'scope.$watch' to do what ngModel's '$parsers' and '$formatters' was built to do. Take a look here: https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

edited Mar 6, 2017 at 15:01

answered Feb 19, 2015 at 17:11

gkl

3393 silver badges13 bronze badges

2 Comments

Sam Over a year ago

there is no ngModel.$parse

gkl Over a year ago

whoa, you are correct ... edited to referrence the correct methods.

Collectives™ on Stack Overflow

AngularJs BootstrapUI Datepicker validation

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related