如何在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

模板在这里：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 2

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

---

tried to change the background color of the days

added an inline style

in day.html I added style="background-color:orange" to the td that contains the days. Look at the plunk.

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

example.css

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

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

DEMO on PLNKR.

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/

Answer 4

这个方法对我有用。 首先复制popup.html、datepicker.html、day.html、month.html、year.html文件到你的项目中。假设我已经在 datepicker 文件夹和 datepickerPopup 文件夹

下添加了那些

日期选择器文件夹

• datepicker.html
• day.html
• month.html
• year.html

datepickerPopup 文件夹

• popup.html

接下来，您必须同时添加 datepicker-template-url 和 datepicker-popup-template-url 对于输入元素

<input type="text" class="form-control" 
     uib-datepicker-popup
     datepicker-template-url="libs/js/uib/template/datepicker/datepicker.html"
     datepicker-popup-template-url="libs/js/uib/template/datepickerPopup/popup.html"
     ng-keypress="$event.preventDefault()"
 />

此外，如果您需要为日、月和年选择器添加自定义 HTML，您必须为每个 template-url 添加 datepicker.html

<div ng-switch="datepickerMode">
    <div template-url="libs/js/uib/template/datepicker/day.html" uib-daypicker ng-switch-when="day" tabindex="0" class="uib-daypicker">
    </div>
    <div template-url="libs/js/uib/template/datepicker/month.html" uib-monthpicker ng-switch-when="month" tabindex="0" class="uib-monthpicker"></div>
    <div template-url="libs/js/uib/template/datepicker/year.html" uib-yearpicker ng-switch-when="year" tabindex="0" class="uib-yearpicker"></div>
</div>

然后您可以自定义月、日或年 HTML 文件，这些更改将显示在 UI 中。例如，我在 day.html

中更改了月份更改器

<table role="grid" aria-labelledby="{{::uniqueId}}-title" aria-activedescendant="{{activeDateId}}">
        <thead>
        <tr>
            <th>
                <button type="button" class="btn btn-default btn-sm pull-left uib-left" ng-click="move(-1)" tabindex="-1"><i
                        aria-hidden="true" class="fa fa-chevron-left"></i><span class="sr-only">previous</span></button>
            </th>
            <th colspan="{{::5 + showWeeks}}">
                <button id="{{::uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button"
                        style="background: #2a7abf;color: white;"
                        class="btn btn-default btn-sm uib-title" ng-click="toggleMode()"
                        ng-disabled="datepickerMode === maxMode" tabindex="-1">
                    <strong style="display: flex;justify-content: center;">{{title}}
                        <i style="margin-left: 10px;font-size: 18px;" class="fa fa-caret-down" aria-hidden="true"></i>
                    </strong>
                </button>
            </th>
            <th>
                <button type="button" class="btn btn-default btn-sm pull-right uib-right" ng-click="move(1)" tabindex="-1">
                    <i aria-hidden="true" class="fa fa-chevron-right"></i><span class="sr-only">next</span></button>
            </th>
        </tr>
        <tr>
            <th ng-if="showWeeks" class="text-center"></th>
            <th ng-repeat="label in ::labels track by $index" class="text-center"><small aria-label="{{::label.full}}">{{::label.abbr}}</small>
            </th>
        </tr>
        </thead>
        <tbody>
        <tr class="uib-weeks" ng-repeat="row in rows track by $index" role="row">
            <td ng-if="showWeeks" class="text-center h6"><em>{{ weekNumbers[$index] }}</em></td>
            <td ng-repeat="dt in row" class="uib-day text-center" role="gridcell"
                id="{{::dt.uid}}"
                ng-class="::dt.customClass">
                <button type="button" class="btn btn-default btn-sm"
                        uib-is-class="
                'btn-info' for selectedDt,
                'active' for activeDt
                on dt"
                        ng-click="select(dt.date)"
                        ng-disabled="::dt.disabled"
                        tabindex="-1"><span ng-class="::{'text-muted': dt.secondary, 'text-info': dt.current}">{{::dt.label}}</span>
                </button>
            </td>
        </tr>
        </tbody>
    </table>