Angular - ui-bootstrap - datepicker - Is there a way of detecting when the month has changed?

Question

I\'d like to set the date to the 1st of the currently selected month when it\'s changed.

is there a way without monitoring click event on the month\'s buttons?

Answer 1

I had the same issue when I was trying to set the ng-model to first day of January when they select a year. @Rob and @spongessuck answers really helped me. This is how I solved it. Whenever you select a year or month, the variable activeDate gets set. I am using $setViewValue to set the model to activeDate by watching variable datepickerMode which changes whenever you select a year, month or date.

`

app.config(function ($provide) {
     $provide.decorator('datepickerDirective', function ($delegate) {
         var directive = $delegate[0],
             link = directive.link;
         directive.compile = function () {
         return function (scope, element, attrs, ctrl) {
                link.apply(this, arguments);
                scope.$watch('datepickerMode', function (newValue, oldValue) {
                if (newValue!=oldValue && newValue == 'month') {
                     ctrl[1].$setViewValue(ctrl[0].activeDate);
                  }
                });
              };
             };
          return $delegate;
         });
    });

`

Hope this helps someone.