2

I am trying to extend the angular-ui.github.io/bootstrap/ datepicker and it seems not to work.

angular.module('myApp',
[
    'ui.bootstrap'
])
.config(function($provide) {
    $provide.decorator('datepickerDirective', function ($delegate) {
        var directive = $delegate[0],
            link = directive.link;
        //works on 1.2
        /*
        angular.extend(directive.scope, {'monthChanged': '&'});
        */
        // Not working in Angular 1.4 too.
        /*directive.$$isolateBindings['monthChanged'] = {
         attrName: 'monthChanged',
         mode: '&',
         optional: true
         };*/
        // Not working in Angular 1.4 too.
        directive.bindToController = {
            'monthChanged': '&'
        };
        directive.compile = function () {
            return function (scope, element, attrs, ctrl) {
                link.apply(this, arguments);

                scope.$watch(function () {
                    return ctrl[0].activeDate.getTime();
                }, function (newVal, oldVal) {
                    if (scope.datepickerMode == 'day') {
                        oldVal = moment(oldVal).format('MM-YYYY');
                        newVal = moment(newVal).format('MM-YYYY');

                        if (oldVal !== newVal) {
                            var arr = newVal.split('-');
                            scope.monthChanged({'$month': arr[0], '$year': arr[1]});
                        }
                    }
                });
            };
        };
        return $delegate;
    })
})
.controller('MyCtrl', ['$rootScope', '$scope',
  function ($rootScope, $scope){
      $scope.changeMonth = function(month, year) {
            console.log(month, year);
            // set your date here if you need to
            // in my case, i needed to request some results via ajax
        };
    }]
);

I keep getting this error "TypeError: scope.monthChanged is not a function" I have adapted the code from Angular - ui-bootstrap - datepicker - Is there a way of detecting when the month has changed?

HTML is:

 <input id="deadlineField" name="deadlineField" type="text" class="form-control"
                           ng-model="newHw.deadline"
                           datepicker-popup="dd MMM yyyy" ng-disabled="viewOnly"
                           is-open="status.calDeadlineOpened" ng-focus="status.calDeadlineOpened=true"
                           show-weeks="false"
                           month-changed="changeMonth($month, $year)"
                            />

Try this plunker: http://plnkr.co/edit/sXuAkUz0l9XdtdUb457V?p=preview If you inspect the code, when I change the inline calendar to the next month, there is this error code: TypeError: scope.monthChanged is not a function –

2
  • please post a working plunker that reproduces the issue you are experiencing. this will assist us in helping you debug your code. Commented Oct 6, 2015 at 20:03
  • Try this plunker: plnkr.co/edit/sXuAkUz0l9XdtdUb457V?p=preview If you inspect the code, when I change the inline calendar to the next month, there is this error code: TypeError: scope.monthChanged is not a function Commented Oct 8, 2015 at 2:23

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.