How to use a template in Angular UI Bootstrap Datepicker?

Question

In this question it is explained how to use templates in Angular UI Boostrap. But it doesn't have an example of a DatePicker template. I need to change the fonts and get rid of the number borders. I analyzed the Angular UI javascript but couldn't find the template. Any thoughts?

This is the 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

This method works for me. First copy popup.html,datepicker.html,day.html,month.html,year.html files to your project. Let's assume I have added those under the datepicker folder and datepickerPopup folder

datepicker folder

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

datepickerPopup folder

• popup.html

Next, you must add both datepicker-template-url and datepicker-popup-template-url for the input element

<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()"
 />

Also if you need to add custom HTML for the day, month and year selector you must add template-url for each inside the 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>

Then you can customize month, day or year HTML files and those changes will be appear in the UI. As a example I have changed month changer in the 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>

Answer 2

The correct format is

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

You can load an inline template or external template

It's also available in the documentation https://angular-ui.github.io/bootstrap/

Answer 3

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>

The daypicker templates are in 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.

To change the day buttons background to orange add the following CSS:

example.css

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

This overrides the btn-default background for the uib-day buttons.

The DEMO on PLNKR.

Answer 4

Templates are here: https://github.com/angular-ui/bootstrap/tree/master/template

Popup template: https://github.com/angular-ui/bootstrap/tree/master/template/datepickerPopup

And this is how you use it:

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