如何在当前月份之外禁用 Angular UI 日期选择器按钮？

Question

我在 Angular 中使用 Bootstrap UI 日期选择器，它工作正常。但是，当我在月视图中时，月外的日子在名为 text-muted 的跨度上有一个 CSS class，我已将其设置为 display:none.

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

因此，如果我在 5 月，我会关闭 4 月和 6 月的日期，因此您看不到日期，但仍然可以单击按钮转到其他月份的那些日期....

澄清一下，如果当前日期是 5 月，并且我在视图中查看的是 5 月，我不希望能够看到或单击 4 月或 6 月的日期。但是，当我使用下个月按钮并查看 6 月份时，我不想看到 5 月或 7 月的日期。

Answer 1

创建一个可以访问日期选择器控制器的 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 日期选择器按钮？

How can I disable the Angular UI Datepicker buttons outside of the current month?

user-interface

angularjs

angular-ui-bootstrap

bootstrap-datepicker