chỉ ẩn nút rõ ràng trong angular jp datepicker directive

Question

Tôi muốn ẩn nút chỉ rõ ràng từ chỉ thị datepicker trong js góc. Hiện tại có ba nút ở dưới cùng của angs js datePicker directive (Hôm nay, rõ ràng và Close), Có cách nào để làm cho khả năng hiển thị của các nút cấu hình, như vậy mà tôi có thể ẩn một trong các nút ra khỏi nó.

Bộ chọn ngày mà tôi đang sử dụng đang sử dụng thư viện ui-bootstrap.

Answer 1

Hiện tại, hiện có cách để ẩn các nút riêng lẻ trong thanh nút datepicker thông qua các tùy chọn trên chỉ thị. Bạn có thể ghi đè lên mẫu và loại bỏ nút rõ ràng, nhưng đó là một bản vá toàn cầu và không cung cấp ẩn/hiển thị dựa trên một điều kiện. Bạn có thể tạo một lớp nhắm mục tiêu đến nút bạn muốn ẩn vì đây là plunk

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

chứng minh mặc dù đó là giải pháp dễ vỡ.

Tôi khuyên bạn nên gửi yêu cầu tính năng để thêm tùy chọn trong số các nút có sẵn trong thanh nút.

Answer 2

Thêm vào giải pháp của Rob J, nếu chúng ta thêm ng-class = {"require": "vm.required"} vào div cha của đầu vào datepicker hoặc chỉ cần thêm một lớp được gọi là div. Sau đó sử dụng sự kỳ diệu css để ẩn hoặc hiển thị các nút rõ ràng tùy thuộc vào giá trị của vm.required:

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

Answer 3

dễ dàng, thay thế các mẫu:

<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

Bạn Hack với css. Nó làm việc cho tôi.

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

Answer 5

nếu bạn muốn loại bỏ các nút rõ ràng, nó có nghĩa là lĩnh vực này là cần thiết, và như tôi không đồng ý với buộc vật (như tạo một div cha mẹ và gõ các lớp học), sau đó chỉ cần thiết lập các yếu tố cho mà bạn tích cực datepicker theo yêu cầu

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