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>

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

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>

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered May 06 '16 at 16:30

georgeawg

48,608
13
72
95

yes, I know, I tried to use them in the plunk but it's not working – ps0604 May 06 '16 at 16:34
I added an inline style – ps0604 May 06 '16 at 16:42
in `day.html` I added `style="background-color:orange"` to the `td` that contains the days. Look at the plunk. – ps0604 May 06 '16 at 16:50
if you're overriding templates make sure you use the ui-bootstrap version that is without templates, then take the templates you need from the repo and modify them yourself. simple inline css just won't do. – svarog May 06 '16 at 16:54
Look at this plunk, it is possible to decorate the template http://plnkr.co/edit/RE9AvUwEmKmAzem9mfpI?p=preview – ps0604 May 06 '16 at 17:02
See answer to see example of CSS overrides. – georgeawg May 06 '16 at 17:38
you changed the syles instead of the template but it works for me, thanks – ps0604 May 06 '16 at 17:46
1

I tried the plunker. The day.html override is not working. The orange color come from the css, not the inline style in day.html – baraber Aug 27 '18 at 20:24

score 0 · Answer 2 · answered May 06 '16 at 15:52

0

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

answered May 06 '16 at 15:52

Kyle

5,407
6
32
47

please take a look at the plunk, I tried to override the template but angular is still using the default. http://plnkr.co/edit/DowKrAo6Ol5sjHsj9M0s?p=preview – ps0604 May 06 '16 at 16:18

score 0 · Answer 3 · answered Oct 12 '16 at 09:29

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/

score 0 · Answer 4 · answered Oct 14 '21 at 05:36

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>

How to use a template in Angular UI Bootstrap Datepicker?

4 Answers4

datepicker.html1

example.css

datepicker.html¹