如何更改 uib-datepicker-popup 按钮栏？答案

【问题标题】：How do I change the uib-datepicker-popup button bar?如何更改 uib-datepicker-popup 按钮栏？
【发布时间】：2018-02-07 17:20:47
【问题描述】：

我正在使用uib-datepicker-popup，我想更改按钮栏。现在它分别使用.btn-info、.btn-danger 和.btn-success 作为“今天”、“清除”和“关闭”按钮。如何将这些更改为其他按钮类，例如 .btn-default（希望没有太多工作）？

【问题讨论】：

标签： angularjs angular-ui-bootstrap

【解决方案1】：

您可以修改日期选择器模板。默认的在这里：https://github.com/angular-ui/bootstrap/blob/master/template/datepickerPopup/popup.html

像这样使用templateUrl 指令：

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

【讨论】：

谢谢伙计！默认的日期选择器模板特别有帮助:)

【解决方案2】：

首先，您需要添加datepicker-popup-template-url 属性

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

然后，你需要创建一个template.html

我添加了一个自定义按钮，设置日期为 31/12/9999。模板如下

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

【讨论】：