angular bootstrap datepicker disable dates with $http request in dateDisabled function

Question

So i have uibDatepicker directive (https://angular-ui.github.io/bootstrap/#datepicker) where i want to send request for each day provided in datepicker, hit server with that date, and return if it should be disabled or not. The problem is that it's async call, and dateDisabled function does not handle promises. Any suggestions?

<span uib-datepicker datepicker-options="datepickerOptions" ng-model="selectedDate"></span>

-

$scope.datepickerOptions: {
    dateDisabled: function (dateAndMode) {
        if (dateAndMode.mode !== "day") {
            return false;
        }
        //async call
        TimeService.getIsDateAvailable(dateAndMode.date).then(function (data) {
          //returns true or false
            return data.data;
        });
    }

I tried a lot of solutions. I found this answer: Disable dates using factory response UI Bootstrap Datepicker

But i can't apply this to my code.

When the datepicker changes months it calls the `dateDisabled` function 7x6 (42) times. Do you really want to make 42 calls to the server everytime the user selects a different month? — georgeawg, Mar 01 '17 at 20:07
Is there any way to get those 42 days from datepicker? so i can pass them at once and generate response? — tony, Mar 02 '17 at 08:26
The `dateDisabled` API was not designed to be used asynchronously. Consider using the [ngModelController $asyncValidators API](https://docs.angularjs.org/api/ng/type/ngModel.NgModelController#$asyncValidators) which was designed to be used asynchronously. — georgeawg, Mar 02 '17 at 08:42

score 1 · Answer 1 · answered Mar 01 '17 at 14:30

1

You could preload the disabled dates and store them in a scope variable and then search for current date in the cached data. I think this is the best solution.

answered Mar 01 '17 at 14:30

Robert Sandu

673
1
6
15

I considered that solution but i have two problems 1. My search is depending on a resource doing some job, so if we change resource, then the dates should be updated, so i cannot preload that 2. What if client change month? I would need to get disabled dates for next lets say 2 years...what will be heavy thing to do on serverside, and also a lot of unnecessary job. So what i want in that case is to get only disabled dates for 30 days that are shown in datepicker, and if we change month, we hit server and get disabled dates for those dates shown in datepicker. thanks – tony Mar 01 '17 at 15:02
1

Then you can watch the current month http://stackoverflow.com/questions/26928861/angular-ui-bootstrap-datepicker-is-there-a-way-of-detecting-when-the-month and then reload the calendar – Robert Sandu Mar 01 '17 at 15:12
Thank you robert, i managed to fix this as i extended uibDatepickerDirective for getting all visible dates from datepicker, and then preloading results as you wrote. – tony Mar 03 '17 at 13:13

score 0 · Accepted Answer · edited May 23 '17 at 12:17

So i managed to fix this with preloading dates that are disabled. The trick i needed is first to get all 42 visible dates from datepicker, and than pass them to server, filter them and return back. Also if we change month, we will have new 42 visible dates, so we need to update disabled dates again.

You can see part of getting datepicker visible dates in this question: angular bootstrap datepicker get visible dates (day mode)

angular bootstrap datepicker disable dates with $http request in dateDisabled function

2 Answers2