Angularjs Angular-ui bootstrap-datepicker-是否有方法检测月份的变化？

我想将更改日期设置为当前所选月份的第一个月

有没有一种方法可以不监视当月按钮上的点击事件

短暂性脑缺血发作

---

Sam

日期选择器的作用域有一个属性“activeDateId”，您可以查看该属性。当你换了几个月的时候，情况就变了

我认为最好的方法是在datepicker指令上创建一个“decorator”，这样就可以为它添加功能。如果重写指令的“compile”函数，则可以访问其范围

您可以在module.config函数中执行此操作：

$provide.decorator('datepickerDirective', function($delegate) {
    var directive = $delegate[0];

    /* Override compile */
    var link = directive.link;

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

            scope.$watch('activeDateId', function() {
              console.log('switched');
            });
        }
    };

    return $delegate;
});

编辑

我遇到了一个与此类似的代码问题，如果您切换月份，并且两个月的第一个日期在同一天，那么$watch将不会启动。您可以通过查看Datepicker控制器中属性“activeDate”的值来解决此问题：

            scope.$watch(function() {
              return ctrl.activeDate.getTime();
            }, function() {
              console.log('switched');
            });

---

在日期选择器绑定到的模型上放置$watch：

<datepicker ng-model="data.date" min-date="minDate" show-weeks="true" class="well well-sm"></datepicker>

$scope.$watch('data.date', function(){
    //date has changed
});

$scope.$watch（'data.date'，function（）{
//日期变了
});

不幸的是，

日期选择器

指令没有跟踪月/年变化的绑定。这是我作为一个工作环境想到的

在html中。。。 装饰师 另一个装饰师 这是另一个装饰器，也可以工作，但可能有点资源密集。我在这里所做的就是重写指令中已经使用的

isActive（）

方法，以便调用我的方法。我只是把这篇文章作为一个可能的方法来解决第三方指令中的一些限制的例子。我不一定推荐这种解决方案

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

        angular.extend(directive.scope, { 'monthChanged': '&' });

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

                var activeMonth, activeYear, activeFn = scope.isActive;

                scope.isActive = function(dateObj) {
                    if (scope.datepickerMode == 'day' && !dateObj.secondary) {
                        var oldMonth = activeMonth, oldYear = activeYear,
                            newMonth = dateObj.date.getMonth() + 1;
                            newYear = dateObj.date.getFullYear();

                        if (oldMonth !== newMonth || oldYear !== newYear) {
                            activeMonth = newMonth;
                            activeYear = newYear;
                            scope.monthChanged({ '$month': newMonth, '$year': newYear });
                        }
                    }
                    activeFn(dateObj);
                };
            };
        };
        return $delegate;
    });
});

---

当我试图将ng模型设置为1月1日，他们选择一年时，我也遇到了同样的问题@Rob和@spongessuck的回答真的帮助了我。我就是这样解决的。无论何时选择年或月，都会设置变量

activeDate

。我正在使用

$setViewValue

通过查看变量

datepickerMode

将模型设置为

activeDate

，该变量在您选择年、月或日期时会更改

`

`

---

希望这对某人有所帮助。

在你选择一天之前，绑定日期不会改变。选择月/年对模型没有影响。听起来很有希望，可以看看有什么方法可以从父指令中查看该道具吗？没有，您必须创建一个新指令才能查看它。我将编辑我的帖子。@sambomartin您是否成功地完成了此操作？是否强制用户只选择月份而不选择完整日期？可以选择月1号

$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
};

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

        angular.extend(directive.scope, { '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;
    });
});

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

        angular.extend(directive.scope, { 'monthChanged': '&' });

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

                var activeMonth, activeYear, activeFn = scope.isActive;

                scope.isActive = function(dateObj) {
                    if (scope.datepickerMode == 'day' && !dateObj.secondary) {
                        var oldMonth = activeMonth, oldYear = activeYear,
                            newMonth = dateObj.date.getMonth() + 1;
                            newYear = dateObj.date.getFullYear();

                        if (oldMonth !== newMonth || oldYear !== newYear) {
                            activeMonth = newMonth;
                            activeYear = newYear;
                            scope.monthChanged({ '$month': newMonth, '$year': newYear });
                        }
                    }
                    activeFn(dateObj);
                };
            };
        };
        return $delegate;
    });
});

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;
         });
    });