angularjs - 禁用 Angular ui.bootstrap.datepicker

Question

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

我知道您可以禁用日期选择器中的单个日期，但我需要禁用整个日期选择器，如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="禁用”到输入和按钮标签。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>

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

$scope.disabled = true;

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

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

并且整个日期选择器被启用。有了这个，您显然可以自定义您想要对任何事件执行的操作，并将日期选择器从启用到禁用再翻转。希望这可以帮助。

Answer 3

See the code, it watch the ngDisabled attribute value, because the control can be disabled conditionally

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

For complete article and demo see the link and many more like how to use start and end date validation

Answer 4

我在这里找到了很好的解决方案：看看布拉德里斯评论

使用这个 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>

行得通。