Question

我在Angular中使用Bootstrap UI Datepicker，它运行正常。但是，当我在月视图中时，月份之外的日子有一个名为text-muted的跨度上的CSS类，我设置为显示：none。

这一切都很好 - 我现在看不到其他月份的日期，这与我的设计相符。但是这些日期的封闭按钮仍然是可点击的，并且似乎没有任何类的类或钩子来禁用它们。任何人都解决了这个问题 - 我认为这将是一个简单的配置Datepicker指令本身，但必须忽略答案？

所以，如果我在五月份，我已经关闭了四月和六月的日期，所以你看不到日期，但按钮仍可点击以转到其他月份的那些日期....

为了澄清，如果当前日期是五月，我在视图中查看五月，我不希望能够在四月或六月看到或点击日期。但是，当我使用下个月按钮，并且正在查看6月份时，我不希望能够在5月或7月看到日期。

Answer 1

创建一个装饰器，可以访问datepicker控制器的activeDate属性，该属性将告诉您正在查看的月份。然后覆盖控制器上的isDisabled功能，以便在日视图中，月份不是活动月份时，日期将被禁用。

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

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

                ctrls[0].isDisabled =  function(date) {
                    return (scope.datepickerMode === 'day'
                        && (date.getMonth() !== ctrls[0].activeDate.getMonth()
                            || date.getYear() !== ctrls[0].activeDate.getYear()));
                };
            }
        };
        return $delegate;
    }]);
});

fiddle

如何在当月之外禁用Angular UI Datepicker按钮？

1 个答案: