hide only clear button in eckig js datepicker Direktive

Question

Ich möchte nur deaktivieren Schaltfläche von Datepicker Direktive in eckigen js. Zur Zeit gibt es drei Schaltflächen am unteren Rand der eckigen js datePicker-Direktive (Heute, löschen und schließen), gibt es eine Möglichkeit, diese Schaltflächen konfigurierbar zu machen, so dass ich eine der Schaltflächen ausblenden kann.

Die Date-Picker, die ich verwende, verwendet Ui-Bootstrap-Bibliothek.

Answer 1

Momentan gibt es jetzt die Möglichkeit, einzelne Schaltflächen in der Datepicker-Symbolleiste durch Optionen in der Direktive auszublenden. Sie können die Vorlage überschreiben und die Schaltfläche "Löschen" entfernen. Dies ist jedoch ein globaler Patch und bietet kein Verbergen/Anzeigen basierend auf einer Bedingung. Sie könnten eine Klasse erstellen, die auf die Schaltfläche Sie, da dies zeigt, ausblenden möchten Ziele plunk

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

obwohl das eine fragile Abhilfe ist.

Ich würde vorschlagen, eine Feature-Anfrage senden, um die Option, welche Schaltflächen sind in der Symbolleiste verfügbar.

Answer 2

Weiter zu Rob Js Lösung, wenn wir eine ng-Klasse = {"require": "vm.required"} zum übergeordneten div der datepicker-Eingabe hinzufügen oder einfach eine Klasse namens require zum div hinzufügen. Dann nutzen Sie die Magie CSS, um die Löschtaste auf den Wert der vm.required je ein- oder ausblenden:

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

Answer 3

Einfach, ersetzen die Vorlage:

<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

Sie mit CSS hacken. Es hat für mich funktioniert.

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

Answer 5

, wenn Sie die Löschtaste entfernt werden sollen, bedeutet dies, dass das Feld erforderlich ist, und, wie ich mit Zwingen Dingen nicht einverstanden ist (wie ein div Eltern zu schaffen und die Eingabe Klassen) und dann nur das Element für die Sie aktiv die Datumsauswahl nach Bedarf

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