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>
<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 addedstyle="background-color:orange"
to thetd
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.
The DEMO on PLNKR.