ps0604 ps0604 - 1 month ago 27
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.

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

datepicker.html1

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