代码之家  ›  专栏  ›  技术社区  ›  colincclark

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

  •  1
  • colincclark  · 技术社区  · 9 年前

    我在Angular中使用BootstrapUIDatepicker,它工作正常。但是,当我在月视图中时,月外的日子在span上有一个CSS类,名为textmuted,我设置为显示:none。

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

    所以,如果我在5月份,我已经关闭了4月和6月的日期,所以你看不到日期,但在其他月份,按钮仍然可以点击到这些日期。。。。


    为了澄清,如果当前日期是5月,而我正在查看视图中的5月,我不想看到或单击4月或6月的日期。然而,当我使用“下个月”按钮并查看六月时,我不想看到五月或七月的日期。

    1 回复  |  直到 9 年前
        1
  •  2
  •   sheilak    9 年前

    创建一个可以访问 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