Angular JS UI Bootstrap Datepicker: max-date and init date issue

Question

What a day I've been having... anyway, I have been assisting some colleagues with an AngularJS project and so much is wrong, anyway... I am using the AngularJS UI Bootstrap Datepicker version 0.11.2 with AngularJS version 1.3. So far so good however I wish to set the minimum date 2 months from the current day, the maximum date six months from the current day and the initial date 2 months from the current day. This is what I have so far:

View

<div data-datepicker
     data-ng-model="dt"
     data-min-date="minDate"
     data-max-date="maxDate"
     data-max-mode="day"
     data-show-weeks="false"
     data-starting-day="1"
     data-year-range="2"
     class="custom-date-picker"></div>

and in my controller...

 var today = new Date(),
    twoMonth = today.setMonth(today.getMonth() + 2),
    sixMonth = today.setMonth(today.getMonth() + 6);

$scope.today = function() {
    $scope.minDate = twoMonth;
    $scope.maxDate = sixMonth;
};

$scope.today();

This is all find however I've noticed that minDate is correct, maxDate is actually 8 months in the future and when I add the following to the directive to set the initial date like so (notice data-init-date="minDate")

<div data-datepicker
     data-ng-model="dt"
     data-init-date="minDate"
     data-min-date="minDate"
     data-max-date="maxDate"
     data-max-mode="day"
     data-show-weeks="false"
     data-starting-day="1"
     data-year-range="2"
     class="custom-date-picker"></div>

I get the following error!

TypeError: undefined is not a function
at e._refreshView (js/vendor/angular/ng-ui-bootstrap-tpls-0.11.2.min.js:8:16705)
at refreshView (js/vendor/angular/ng-ui-bootstrap-tpls-0.11.2.min.js:8:13968)
at link (js/vendor/angular/ng-ui-bootstrap-tpls-0.11.2.min.js:8:17848)
at B (js/vendor/angular/angular-1.3.0-beta.18.min.js:55:369)
at js/vendor/angular/angular-1.3.0-beta.18.min.js:62:378
at g (js/vendor/angular/angular-1.3.0-beta.18.min.js:48:105)
at js/vendor/angular/angular-1.3.0-beta.18.min.js:47:233
at js/vendor/angular/angular-1.3.0-beta.18.min.js:49:54
at Object.r [as transclude] (js/vendor/angular/angular-1.3.0-beta.18.min.js:52:497)
at js/vendor/angular/angular-1.3.0-beta.18.min.js:215:316 <table role="grid" aria-labelledby="{{uniqueId}}-title" aria-activedescendant="{{activeDateId}}" ng-switch-when="day" tabindex="0">

Does anyone know where I am going wrong?

Juho Vepsäläinen · Accepted Answer · 2014-10-21 15:15:45Z

2

It is important to note that your Date gets mutated here:

var today = new Date(),
    twoMonth = today.setMonth(today.getMonth() + 2),
    sixMonth = today.setMonth(today.getMonth() + 6);

Each setMonth adjusts the original Date. Hence the eight month issue.

The latter issue is caused by the fact that twoMonth and sixMonth are numbers. I think your directive expects Dates instead so wrap them with new Date(...).

Solution

I think something like this should work:

var twoMonth = offsetMonths(2);
var sixMonth = offsetMonths(6);

function offsetMonths(offset) {
    var ret = new Date();

    ret.setMonth(ret.getMonth() + offset);

    return new Date(ret);
}

Of course you can simplify things a lot by using something like moment.js.

edited Oct 21, 2014 at 15:15

answered Oct 21, 2014 at 15:09

Juho Vepsäläinen

27k13 gold badges83 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mike Sav Over a year ago

Yep, just realised the reference there! I just don't know why data-init-date="minDate" is crashing the app

Juho Vepsäläinen Over a year ago

Can you link to the library in question? Would it be possible for you to get a trace against non-minified version?

Mike Sav Over a year ago

Even when using the uncompressed version of the lib we still get the same error in the console

Juho Vepsäläinen Over a year ago

Ok. I think I figured it out. today.setMonth returns a number. Wrap those in new Date. I'll do a complete example in a bit.

Juho Vepsäläinen Over a year ago

Done. Please give it a go.

Collectives™ on Stack Overflow

Angular JS UI Bootstrap Datepicker: max-date and init date issue

1 Answer 1

Solution

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Solution

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related