禁用角ui.bootstrap.datepicker

Question

我在角引导集合中使用数据报警器。(http://angular-ui.github.io/bootstrap/)。

我知道您可以在数据报警器中禁用单个日期，但我需要禁用整个数据报警器，如这篇博客文章 (它使用jQuery)中所示。

如何使用角度禁用整个数据报警器？

Answer 1

似乎没有办法直接这样做。但是在https://github.com/angular-ui/bootstrap/issues/1113中讨论了一些解决办法

相反，您可以创建一个范围变量，该变量将指示是否禁用了datepicker，如果是，则完全隐藏数据交换器，并在一个花哨的容器中显示datepicker的模型。

其他方法是将日期禁用为真，禁用输入，并将显示按钮栏设置为false.

但again...those是解决办法..。您可以尝试通过封装自定义指令来使它们看起来更漂亮，比如数据报警器--如果需要的话禁用。或者将您喜欢的包装成角指令，这将需要更多的工作。

Answer 2

如果我正确理解你的要求，我也有同样的问题。这就是我所做的禁用和启用整个数据报警器的角度。我知道你已经有了答案，但我想无论如何我还是会分享的。

下面是我的HTML/引导程序(我从您在页面顶部http://angular-ui.github.io/bootstrap/添加的网站上得到的)：我所做的就是向输入和按钮标签添加ng=“disabled”。禁用仅是一个$scope变量，在我的应用程序中发生某些事件时，它会被设置为true或false。

<div class="col-md-6, nonFields" style="margin-top:6px;">
    <p class="input-group">
        <input type="text" class="form-control" datepicker-popup="MM/dd/yyyy" is-open="opened1" ng-model="dtClosed" ng-required="true" close-text="Close" ng-disabled="disabled"/>
        <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open($event, 'opened1', 'opened2', 'opened3')" ng-disabled="disabled"><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
    </p>
</div>

在我的角js代码中，我在顶部将$scope.disabled设置为true。

$scope.disabled = true;

然后，当用户单击一个按钮并使用正确的输入时，我几乎将$scope.disabled设置为false。

$scope.shortCodeClick = function(){
     $scope.disabled = false;
};

整个数据报警器都启用了。有了这一点，您显然可以自定义您想要对任何事件做什么，并来回翻转数据报警器，从启用到禁用和返回。希望这能有所帮助。

Answer 3

查看代码，它会查看ngDisabled属性值，因为可以有条件地禁用控件。

scope.$watch(attr.ngDisabled, function (newVal) {
  if(newVal === true)
    $(elm).datepicker("disable");
  else
    $(elm).datepicker("enable");
});

有关完整的文章和演示，请参阅链接和更多类似于如何使用开始和结束日期验证的方法。