隐藏角度js datepicker指令中的清除按钮

时间:2015-03-30 18:39:01

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

我想隐藏来自角度js中datepicker指令的清除按钮。 目前在角度js datePicker指令的底部有三个按钮(今天,清除和关闭),有没有办法使这些按钮的可见性可配置,这样我就可以隐藏其中一个按钮。

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

7 个答案:

答案 0 :(得分:4)

目前,现在可以通过指令上的选项隐藏datepicker按钮栏中的各个按钮。您可以覆盖模板并删除清除按钮,但这是一个全局修补程序,并且不提供基于条件的隐藏/显示。您可以创建一个类,该类以您要隐藏的按钮为目标plunk

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

演示了虽然这是一个脆弱的解决方法。

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

答案 1 :(得分:3)

简单,替换模板:

<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>

答案 2 :(得分:3)

你破解了CSS。它对我有用。

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

答案 3 :(得分:0)

继Rob J的解决方案之后,如果我们在datepicker输入的父div中添加ng-class = {&#34;要求&#34;:&#34; vm.required&#34;} ,或者只是在div中添加一个名为require的类。然后使用magic css隐藏或显示清除按钮,具体取决于vm.required:

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

答案 4 :(得分:0)

如果你想删除clear按钮,这意味着该字段是必需的,因为我不同意强制事项(比如创建div父类和键入类),然后只需设置你激活的元素datepicker根据需要

&#13;
&#13;
[uib-datepicker-popup][required] + [uib-datepicker-popup-wrap] button[ng-click*="select(null"] {
  display: none;
}
&#13;
<input type="text" ng-model="datePicker.date" uib-datepicker-popup="dd MMM yyyy" readonly is-open="datePicker.opened" ng-click="datePicker.opened = true" required />
&#13;
&#13;
&#13;

答案 5 :(得分:0)

您可以执行以下CSS技巧来隐藏清除按钮:

<HBox prefHeight="100.0" prefWidth="200.0">
   <children>
      <SplitPane prefHeight="200.0" prefWidth="200.0" />
      <ScrollPane prefHeight="200.0" prefWidth="200.0" HBox.hgrow="ALWAYS">
        <content>
          <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="200.0" prefWidth="200.0" />
        </content>
      </ScrollPane>
      <ScrollPane prefHeight="200.0" prefWidth="200.0" />
   </children>
</HBox>

答案 6 :(得分:0)

您可以通过添加到style.css中来隐藏它:

.uib-clear {
    display: none;
}