How do I change the uib-datepicker-popup button bar?

Question

I\'m using uib-datepicker-popup and I would like to change the button bar. Right now it uses .btn-info, .btn-danger and .btn-success for t

Answer 1

You can modify the datepicker template. Default one is here: https://github.com/angular-ui/bootstrap/blob/master/template/datepickerPopup/popup.html

Use the templateUrl directive like this:

<input type="text" uib-datepicker-popup="MM/dd/yyyy" template-url="path/to/template.html" />

Answer 2

First, you need to add the datepicker-popup-template-url property

<input type="text" uib-datepicker-popup="MM/dd/yyyy" **datepicker-popup-template-url**="path/to/template.html" />

Then, you need to create a template.html

I added a custom button which is setting date 31/12/9999. Template is below

<ul class="uib-datepicker-popup dropdown-menu uib-position-measure" dropdown-nested ng-if="isOpen" style="left: 0px; top: 43px; 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" class="uib-button-bar">
    <span class="btn-group pull-left">
      <button type="button" class="btn btn-sm btn-info uib-datepicker-current" ng-click="select('today', $event)" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
      <button type="button" class="btn btn-sm btn-danger uib-clear" ng-click="select('31/12/9999', $event)">31/12/9999</button>
    </span>
    <button type="button" class="btn btn-sm btn-success pull-right uib-close" ng-click="close($event)">{{ getText('close') }}</button>
  </li>
</ul>