hide only clear button in angular js datepicker directive

Question

I want to hide only clear button from datepicker directive in angular js. Currently there are three buttons at the bottom of the angular js datePicker directive(Today, clear and Close), Is there any way to make visibility of these buttons configurable, such that i can hide one of the buttons out of it.

The Date picker which i am using is using ui-bootstrap library.

Answer 1

Currently there is now way to hide individual buttons in the datepicker button bar via options on the directive. You can override the template and remove the clear button, but that is a global patch and doesn't offer hiding/showing based on a condition. You could create a class that targets the button you want to hide as this plunk

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

demonstrates although that is a fragile workaround.

I would suggest submitting a feature request to add the option of which buttons are available in the button bar.

Answer 2

Easy, replace the template:

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

You hack with css. It worked for me.

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