Angular Month Event with Bootprap Datepicker Date Swap

You can extend the datepicker directive with a decorator, and in the decorator, overwrite the function compile

to add $watch

to activeDate

. You can check if the month or year of the date has changed and, if so, call the function on the service you enter into the decorator. Pass in the date if needed and in the service make your call to the backend.

The example below and in the fiddle - MyService

just records the date, but you can replace the call with the backend.

var app = angular.module('app', ['ui.bootstrap']);

angular.module('app').service('MyService', function() {
    this.doStuff = function(date) {
        console.log(date);
    }
});

angular.module('app').config(function($provide) {
    $provide.decorator('datepickerDirective', ['$delegate', 'MyService', function($delegate, MyService) {
        var directive = $delegate[0];

        var link = directive.link;

        directive.compile = function() {
            return function(scope, element, attrs, ctrls) {
                link.apply(this, arguments);

                scope.$watch(function() {
                    return ctrls[0].activeDate;
                }, function(newValue, oldValue) {
                    if (oldValue.getMonth() !== newValue.getMonth() 
                       || oldValue.getYear() !== newValue.getYear()) {
                        MyService.doStuff(newValue);
                    }
                }, true);
            }
        };
        return $delegate;
    }]);
});