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
– georgeawg, Commented Mar 1, 2017 at 20:07
Is there any way to get those 42 days from datepicker? so i can pass them at once and generate response? — frank91
– frank91, Commented Mar 2, 2017 at 8:26
The dateDisabled API was not designed to be used asynchronously. Consider using the ngModelController $asyncValidators API which was designed to be used asynchronously. — georgeawg
– georgeawg, Commented Mar 2, 2017 at 8:42

Robert Sandu · Accepted Answer · 2017-03-01 14:30:50Z

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 1, 2017 at 14:30

Robert Sandu

6731 gold badge6 silver badges15 bronze badges

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

3 Comments

frank91 Over a year ago

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

Robert Sandu Over a year ago

Then you can watch the current month stackoverflow.com/questions/26928861/… and then reload the calendar

frank91 Over a year ago

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.

Community · Accepted Answer · 2017-05-23 12:17:14Z

0

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)

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Mar 3, 2017 at 13:12

frank91

1311 gold badge1 silver badge10 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related