Angular - ui-bootstrap - datepicker - 有没有办法检测月份何时发生变化? [英] Angular - ui-bootstrap - datepicker - Is there a way of detecting when the month has changed?

问题描述

我想在更改日期时将日期设置为当前所选月份的 1 号.

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?

蒂亚山姆

推荐答案

遗憾的是 datepicker 指令没有绑定来跟踪月/年的变化.这是我想出的解决方法.

It's unfortunate that the datepicker directive doesn't have a binding to track the month/year change. Here is what I came up with as a work around.

<datepicker month-changed="changeMonth($month, $year)" />

在控制器中...

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

另一个装饰器

这是另一个也可以工作的装饰器，但可能需要更多的资源.我在这里所做的只是覆盖指令中已经使用的 isActive() 方法，因此我的方法被调用.我只是将此作为解决 3rd 方指令中某些限制的可能方法的示例.我不一定推荐这种解决方案.

Another decorator

Here is another decorator that also works but probably a bit more resource intensive. All I do here is override the isActive() method already used in the directive so my method is called instead. I'm only posting this as an example of the possible ways to work around some of the restrictions in 3rd party directives. I don't necessarily recommend this solution.

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

这篇关于Angular - ui-bootstrap - datepicker - 有没有办法检测月份何时发生变化?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！