在Angular UI中更改按钮类Datepicker

Question

In this plunk我有一个使用模板的Angular UI日期选择器。我需要更改“今日”，“清除”和“关闭”按钮的颜色，但在popup.html中更改它们不起作用。它应该显示灰色，橙色和蓝色按钮。

我从

<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(null, $event)">{{ getText('clear') }}</button> 
    </span> 
    <button type="button" class="btn btn-sm btn-success pull-right uib-close" ng-click="close($event)">{{ getText('close') }}</button> 
</li> 

改为

<li ng-if="showButtonBar" class="uib-button-bar"> 
    <span class="btn-group pull-left"> 
    <button type="button" class="btn btn-sm btn-default uib-datepicker-current" ng-click="select('today', $event)" ng-disabled="isDisabled('today')">{{ getText('current') }}</button> 
    <button type="button" class="btn btn-sm btn-warning uib-clear" ng-click="select(null, $event)">{{ getText('clear') }}</button> 
    </span> 
    <button type="button" class="btn btn-sm btn-primary pull-right uib-close" ng-click="close($event)">{{ getText('close') }}</button> 
</li> 

注意，我改变了按钮的类名来改变颜色，但是当我在浏览器中考察，日期选择器仍使用旧类。如何解决这个问题？

Answer 1

要设置自定义弹出模板使用datepicker-popup-template-url属性，例如：

<input datepicker-popup-template-url="popup.html" type="text" class="form-control" is-open="true" ng-model="dt" uib-datepicker-popup="MM-dd-yyyy" 
      datepicker-options="dateOptions" close-text="Close" popup-placement="bottom-left" on-open-focus="false" /> 

Demo