Skip to content
This repository was archived by the owner on May 29, 2019. It is now read-only.

feat(datepicker): Provide a 'today' flag on the day object #1551

Closed
wants to merge 1 commit into from
Closed

feat(datepicker): Provide a 'today' flag on the day object #1551

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions src/datepicker/datepicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.position'])
this.minDate = dtConfig.minDate ? new Date(dtConfig.minDate) : null;
this.maxDate = dtConfig.maxDate ? new Date(dtConfig.maxDate) : null;

var today = new Date();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can append this to the initial block of variables definitions.


function getValue(value, defaultValue) {
return angular.isDefined(value) ? $scope.$parent.$eval(value) : defaultValue;
}
Expand All @@ -47,8 +49,8 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.position'])
return dates;
}

function makeDate(date, format, isSelected, isSecondary) {
return { date: date, label: dateFilter(date, format), selected: !!isSelected, secondary: !!isSecondary };
function makeDate(date, format, isSelected, isSecondary, isToday) {
return { date: date, label: dateFilter(date, format), selected: !!isSelected, secondary: !!isSecondary, today: isToday };
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@perry You set the hours of the date objects to make the comparison. The altering of the date object may cause other problems. I would prefer if you used the compare functions.

}

this.modes = [
Expand All @@ -70,7 +72,7 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.position'])
var days = getDates(firstDate, numDates), labels = new Array(7);
for (var i = 0; i < numDates; i ++) {
var dt = new Date(days[i]);
days[i] = makeDate(dt, format.day, (selected && selected.getDate() === dt.getDate() && selected.getMonth() === dt.getMonth() && selected.getFullYear() === dt.getFullYear()), dt.getMonth() !== month);
days[i] = makeDate(dt, format.day, (selected && selected.getDate() === dt.getDate() && selected.getMonth() === dt.getMonth() && selected.getFullYear() === dt.getFullYear()), dt.getMonth() !== month, today.setHours(0, 0, 0, 0) === dt.setHours(0, 0, 0, 0));
}
for (var j = 0; j < 7; j++) {
labels[j] = dateFilter(days[j].date, format.dayHeader);
Expand Down
2 changes: 1 addition & 1 deletion template/datepicker/datepicker.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<tr ng-repeat="row in rows">
<td ng-show="showWeekNumbers" class="text-center"><em>{{ getWeekNumber(row) }}</em></td>
<td ng-repeat="dt in row" class="text-center">
<button type="button" style="width:100%;" class="btn btn-default btn-sm" ng-class="{'btn-info': dt.selected}" ng-click="select(dt.date)" ng-disabled="dt.disabled"><span ng-class="{'text-muted': dt.secondary}">{{dt.label}}</span></button>
<button type="button" style="width:100%;" class="btn btn-default btn-sm" ng-class="{'btn-info': dt.selected, 'today': dt.today}" ng-click="select(dt.date)" ng-disabled="dt.disabled"><span ng-class="{'text-muted': dt.secondary}">{{dt.label}}</span></button>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@perry I am not keen of adding dummy CSS classes like today. You have to provide a nice visual hint for the default template also. Anyone can override the default template later.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's probably best to use .text-primary or .text-info and not a button class since that would put to much (visual) focus on today, compared to the currently selected day.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Totally agree with @bekos here. We either need to remove this class from the default template or, better yet, make use of on bootstrap class to highlight "today".

</td>
</tr>
</tbody>
Expand Down