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.

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

Solution 2

You hack with css. It worked for me.

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

Solution 3

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>

Comments

[geostima]

I don't understand what you mean by the field being required when the clear button is simply removed? I have used datepickers on many applications and I have removed the clear button on some, all the buttons on others, etc, and never - once - did it have anything to do with it being a required field... Apologies if I seem rude, but I don't think that your post answers the question and is unrelated completely.