ps0604 ps0604 - 10 months ago 105
AngularJS Question

How to use a template in Angular UI Bootstrap Datepicker?

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.


<p class="input-group" style="width:200px;">
<input type="text" class="form-control" is-open="true" ng-model="dt"
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>

Answer Source


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

The daypicker templates are in

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:


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