Broken styles for datepicker with custom day/month/year template #6608
Description
Hi guys
Bug description:
Small background: I wanted to use custom day template to display only days from current month, without days from next and previous months.
For those reason I've written some code:
Controller:
$scope.data = {
startDate: new Date("05/12/2004"),
endDate: new Date("05/12/2004")
};
$scope.options = {
showWeeks: false,
startingDay: 1,
maxDate: new Date("05/12/2004")
};
Template:
<div uib-datepicker class="left-datepicker"
template-url="/common/_tpls/datepicker-custom.html"
datepicker-options="options"
ng-model="data.startDate"></div>
datepicker-custom.html:
<div ng-switch="datepickerMode">
<div uib-daypicker template-url="/common/_tpls/datepicker-custom-day.html" ng-switch-when="day" tabindex="0" class="uib-daypicker"></div>
<div uib-monthpicker ng-switch-when="month" tabindex="0" class="uib-monthpicker"></div>
<div uib-yearpicker ng-switch-when="year" tabindex="0" class="uib-yearpicker"></div>
</div>
datepicker-custom-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="glyphicon glyphicon-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" class="btn btn-default btn-sm uib-title" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1"><strong>{{title}}</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="glyphicon glyphicon-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"
ng-if="datepicker.activeDate.getMonth() === dt.date.getMonth()"
tabindex="-1"><span ng-class="::{'text-muted': dt.secondary, 'text-info': dt.current}">{{::dt.label}}</span></button>
</td>
</tr>
</tbody>
</table>
Code for datepicker-custom-day.html I've found here and just added this line:
ng-if="datepicker.activeDate.getMonth() === dt.date.getMonth()"
All works fine, but: when I select some date, it doesn't change color, something wrong with styles.
I had begun the investigation and after several hours I found the issue:
- I've changed ng-repeat in this line to
ng-repeat="dt in row track by dt.date"
- Also I've added line
ng-class="{'btn-info': dt.selected, active: isActive(dt)}"
After these changes everything works as it should.
Maybe my changes will break some functionality in other cases, I don't know. Waiting for feedback.
Version of Angular, UIBS, and Bootstrap
Angular: 1.6.4
UIBS: 2.5.0
Bootstrap: 3.3.7