Angular UI Bootstrap datepicker, callback when view changes

Question

I use the Angular UI Bootstrap, both the latest versions.

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

My datepicker shows available and unavailable dates with the customClass function. I fetch all availabilities of the current month, but when I click next or previous, I don't have any callback to fetch the new availabilities.

Also, I don't want an asynchronous call 42 times (one for every class) because you will also get lots of timing issues in de datepicker. I hope someone knows a way to achieve this, I've searched very long for a solution now.

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 $scope.dpOptions (DatePicker Options) I have defined what the custom classes need to 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
};

Jason van der Zeeuw · Accepted Answer · 2016-05-26 09:59:13Z

6

My colleague found a solution using an angular $provide.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 a function now I can add this to any controller with a 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.

        });

edited May 26, 2016 at 9:59

answered May 20, 2016 at 10:37

Jason van der Zeeuw

9231 gold badge12 silver badges29 bronze badges

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

1 Comment

Ylli Gashi Over a year ago

This datepicker.monthChanged it is not working on going backwards on months. Is there a solution to that.

Collectives™ on Stack Overflow

Angular UI Bootstrap datepicker, callback when view changes

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related