Angular UI Bootstrap datepicker, callback when changing view

Question

I am using Angular UI Bootstrap as the latest versions.

I would love to have a callback when it changes view, so when I switch from May to June. I need this because of the following scenario:

My datepicker shows available and inaccessible dates with the customClass function. I retrieve all the features of the current month, but when I click next or previous, I don't have a callback to get the new features available.

Also, I don't want to call asynchronously 42 times (one for each class), because you will also have a lot of synchronization issues in datepicker. I hope that someone knows how to achieve this, I have been looking for a solution for a long time.

My HTML:

<div class="input-group"> <span class="input-group-addon" ng-click="vm.OpenDatepicker($event,'1')"><i class="ti-calendar"></i></span> <input type="text" class="form-control" datepicker-options="dpOptions" readonly style="cursor:pointer; background-color:white;" uib-datepicker-popup="dd-MMMM-yyyy" min-date="minDate" show-weeks="true" ng-model="selectedDate" is-open="vm.$scope.datepickers[1]" show-button-bar="false" ng-click="vm.OpenDatepicker($event,'1')" /> </div> 

In the parameters $ scope.dpOptions (DatePicker Options), I determined what user classes should be:

 $scope.dpOptions.customClass= function (data) { //Here are my availabilities of the first month fetched //When I change the month in my view, I first want to have the other availabilities //so I can return the new red/green classes }; 

Answer 1

My colleague found a solution using the angular $ offer.decorator function! This will add some additional features to any existing directive.

 $provide.decorator('uibDatepickerDirective', function ($delegate) { var directive = $delegate[0]; var directiveCompile = directive.compile; directive.compile = function () { var link = directiveCompile.apply(this, arguments); return function (scope) { link.apply(this, arguments); var oldMove = scope.move; scope.move = function (direction) { oldMove.apply(this, arguments); scope.$emit('datepicker.monthChanged', this.rows); } } }; return $delegate; }); 

To call the function now, I can add this to any controller using datepicker:

 $scope.$on('datepicker.monthChanged', function (event, rows) { let startDate = rows[0][0].date; let endDate = rows[5][6].date; //Do anything you want! //To add customClass, every column has a customClass attribute you can set. });