隱藏只有角度js datepicker指令清除按鈕

Question

我想只隱藏角度js中的datepicker指令清除按鈕。 目前在角度js datePicker指令（今天，清除和關閉）的底部有三個按鈕，有沒有什麼辦法使這些按鈕的可見性可配置，以便我可以隱藏其中的一個按鈕。

我使用的日期選取器使用ui-bootstrap庫。

Answer 1

當前有方法通過指令上的選項來隱藏日期選擇器按鈕欄中的單個按鈕。您可以覆蓋模板並刪除清除按鈕，但這是一個全局補丁，並且不會根據條件提供隱藏/顯示。你可以建立指定要隱藏的按鈕一類，因爲這plunk

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

表明儘管這是一個脆弱的解決方法。

我會建議提交一個功能請求，以添加按鈕欄中可用按鈕的選項。

Answer 2

除了Rob J的解決方案，如果我們向datepicker輸入的父div添加ng-class = {「require」：「vm.required」}，或者只需將一個名爲require的類添加到div中。然後使用魔法CSS來隱藏或顯示取決於vm.required值Clear按鈕：

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

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

Answer 4

你砍的CSS。它爲我工作。

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

Answer 5

，如果你想刪除清除按鈕

，這意味着該字段是必需的，因爲我不強迫的東西（比如創建一個div家長和打字班）同意，那麼就設置元素你主動要求

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

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