如何在Angular UI Bootstrap Datepicker中使用模板？

Question

In this question解释了如何在Angular UI Boostrap中使用模板。但它没有DatePicker模板的示例。我需要更改字体并摆脱数字边框。我分析了Angular UI javascript但无法找到模板。有什么想法吗？

这是PLUNK。

HTML

    <p class="input-group" style="width:200px;">
      <input 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"/>
      <span class="input-group-btn">
          <button type="button" class="btn btn-default">
              <i class="glyphicon glyphicon-calendar"></i>
          </button>
      </span>
   </p>

Answer 1

datepicker.html¹

<div class="uib-datepicker" ng-switch="datepickerMode" role="application" ng-keydown="keydown($event)">
  <uib-daypicker ng-switch-when="day" tabindex="0"></uib-daypicker>
  <uib-monthpicker ng-switch-when="month" tabindex="0"></uib-monthpicker>
  <uib-yearpicker ng-switch-when="year" tabindex="0"></uib-yearpicker>
</div>

daypicker模板位于https://github.com/angular-ui/bootstrap/tree/master/template/datepicker

  

尝试更改日期的背景颜色

     

添加了内联样式

     在day.html中的

我将style="background-color:orange"添加到包含日期的td。看看插件。

要将日期按钮背景更改为橙色，请添加以下CSS：

example.css

.uib-day .btn-default { 
    background-color: orange;
}
 .uib-day .btn-default:hover { 
    background-color: white;
}

这会覆盖btn-default按钮的uib-day背景。

DEMO on PLNKR。

Answer 2

模板位于：https://github.com/angular-ui/bootstrap/tree/master/template

弹出式模板：https://github.com/angular-ui/bootstrap/tree/master/template/datepickerPopup

这就是你如何使用它：

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

Answer 3

格式正确

<input type="text" class="form-control" name="dob"
id="dob" datepicker-popup-template-url="views/partials/date-picker.html"
uib-datepicker-popup="{{format}}" ng-model="dob" ng-required="false"
show-weeks="false" datepicker-options="dateOptions" close-text="Close">

您可以加载内嵌模板或外部模板

文档https://angular-ui.github.io/bootstrap/

中也提供了它