Question

我在Angular bootstrap集合中使用了datepicker。（http://angular-ui.github.io/bootstrap/）。

我知道你可以在datepicker中禁用个别日期，但我需要禁用整个日期选择器，如this blog post（使用jQuery）所示。

如何使用Angular禁用整个日期选择器？

Answer 1

似乎没有办法直接这样做。但是在https://github.com/angular-ui/bootstrap/issues/1113

中讨论了一些解决方法

相反，您可以创建一个范围变量来指示是否禁用了datepicker，如果是，则隐藏datepiker，并在花式容器中显示datepicker的模型。

其他方法是将date-disabled设置为true，禁用输入并将show-button-bar设置为false。

但是再次......那些是变通方法......如果你愿意的话，可以尝试通过包装到自定义指令（例如datepicker-disable）使它们看起来更漂亮。或者将你喜欢的jquery datepicker包装成angular指令，这将会更加有效。

Answer 2

如果我理解你的要求正确，我也有同样的问题。这就是我在Angular中禁用和启用整个日期选择器的方法。我知道你已经有了答案，但我想我还是会分享。

这是我的HTML / bootstrap（我从你在顶部http://angular-ui.github.io/bootstrap/几乎在页面的一半处添加的网站获得）：我所做的就是在输入中添加ng-disabled =“disabled”按钮标签。 disable只是一个$ 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设置为顶部的

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

For complete article and demo see the link以及更多如何使用开始和结束日期验证

Answer 4

我在这里找到了有效的解决方案：look at bradrisse comment

使用此CSS：

.disabled-picker { cursor: not-allowed; } .disabled-picker:before { content: "";
z-index: 1;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.8); }

和HTML：

<div ng-class="{'disabled-picker': anyBoolHere }">
<datetimepicker ng-model="data.date"></datetimepicker>

做到了。

禁用Angular ui.bootstrap.datepicker

4 个答案: