Angular Bootstrap datepicker - date disabled

Question

I have an AngularUI Bootstrap calendar with a disabledDates function

<uib-datepicker ng-model="date" ng-change="change()"  date-disabled="disabledDates(date,mode)"></uib-datepicker>

This is the function:

 $scope.disabledDates = function (date, mode) {
                if ($scope.daysAvailable != null) {
                    return mode === 'day' && $scope.daysAvailable.indexOf(date.getDay() + 1) == -1;
                }
            }

$scope.daysAvailable is loaded from the server with an $http request

 $scope.init = function () {
    return $http.get('/OrderEntry/GetAvailableDays', { params: { method: shipMethod, state: state, zip: zip } }).then(function (data) {
        $scope.daysAvailable  data.data;
    });
}

The problem is that my HTML is loading (and calling disabledDates() before the results are returned from the server and loaded in the controller init()

How can I prevent the calendar load until the data is returned?

M B · Accepted Answer · 2016-05-18 20:03:38Z

5

you can display the date picker only after daysAvailable arrive:

<div ng-show="daysAvailable">
    <uib-datepicker  ng-model="date" ng-change="change()"  date-disabled="disabledDates(date,mode)"></uib-datepicker>
</div>

edited May 18, 2016 at 20:03

M B

2,32627 silver badges36 bronze badges

answered May 18, 2016 at 15:16

MayK

1,3291 gold badge10 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

Angular Bootstrap datepicker - date disabled

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related