在角度js datepicker指令中仅隐藏清除按钮答案

【问题标题】：hide only clear button in angular js datepicker directive在角度js datepicker指令中仅隐藏清除按钮
【发布时间】：2015-03-30 18:39:01
【问题描述】：

我只想从 Angular js 中的 datepicker 指令中隐藏清除按钮。目前在 Angular js datePicker 指令的底部有三个按钮（今天，清除和关闭），有没有办法使这些按钮的可见性可配置，这样我就可以隐藏其中一个按钮。

我正在使用的日期选择器正在使用 ui-bootstrap 库。

【问题讨论】：

你能给我们一些屏幕截图吗？另外，你试过什么？
如果您可以在 plnkr.co 沙箱中提供您的案例演示，这可以让观众更容易帮助您
我同意通过 css 执行此操作的答案。没有其他快速解决方法或现成的可用选项来删除此按钮。因此，无论是快速简便的方法（css）还是通过修改模板文件的更复杂的方法，这对于企业应用程序或使用 bower 的应用程序并不总是可行的。

标签： angularjs angularjs-directive datepicker angular-ui-bootstrap

【解决方案1】：

目前，现在可以通过指令上的选项隐藏日期选择器按钮栏中的各个按钮。您可以覆盖模板并删除清除按钮，但这是一个全局补丁，不提供基于条件的隐藏/显示。您可以创建一个针对您要隐藏的按钮的类plunk

   .datepicker-noclear [ng-click="select(null)"] {
      display: none;
    }

表明这是一个脆弱的解决方法。

我建议提交功能请求以添加按钮栏中可用按钮的选项。

【讨论】：

【解决方案2】：

简单，替换模板：

<script type="text/ng-template" id="template/datepicker/popup.html">
    <ul class="dropdown-menu" ng-if="isOpen" style="display: block" ng-style="{top: position.top+'px', left: position.left+'px'}" ng-keydown="keydown($event)" ng-click="$event.stopPropagation()">
        <li ng-transclude></li>
        <li ng-if="showButtonBar" style="padding:10px 9px 2px">
            <span class="btn-group pull-left">
            <button type="button" class="btn btn-sm btn-info" ng-click="select('today')" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
            </span>
            <button type="button" class="btn btn-sm btn-success pull-right" ng-click="close()">{{ getText('close') }}</button>
        </li>
    </ul>
</script>

【讨论】：

【解决方案3】：

你用 css 破解。它对我有用。

.ui-datepicker .btn-group .btn-danger.btn{
    display: none;
}

【讨论】：

【解决方案4】：

进一步 Rob J 的解决方案，如果我们添加一个 ng-class={"require": "vm.required"} 到 datepicker 输入的父 div，或者简单地添加一个名为 require 的类到 div。然后根据 vm.required 的值使用魔法 css 隐藏或显示清除按钮：

.require button[ng-click^="select(null)"] {
    display: none;
}

【讨论】：

【解决方案5】：

如果你想删除清除按钮，这意味着该字段是必需的，并且我不同意强制的东西（比如创建一个 div 父级和键入类），那么只需设置你激活的元素根据需要选择日期

[uib-datepicker-popup][required] + [uib-datepicker-popup-wrap] button[ng-click*="select(null"] {
  display: none;
}

&lt;input type="text" ng-model="datePicker.date" uib-datepicker-popup="dd MMM yyyy" readonly is-open="datePicker.opened" ng-click="datePicker.opened = true" required /&gt;

【讨论】：

我不明白当清除按钮被简单地删除时需要该字段的意思是什么？我已经在许多应用程序上使用了日期选择器，并且我已经删除了一些应用程序上的清除按钮，其他所有按钮等等，并且从来没有 - 曾经 - 它与它作为必填字段有任何关系......如果我看起来很粗鲁，请道歉，但我不认为您的帖子回答了这个问题并且完全不相关。

【解决方案6】：

您可以使用这个 css 技巧来隐藏清除按钮：

.uib-button-bar > .btn-group > .btn-danger {
    display: none !important;
}

【讨论】：

【解决方案7】：

您可以通过在 style.css 中添加以下内容来隐藏它：

.uib-clear {
    display: none;
}

【讨论】：