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

Commit

Permalink
feat(datepicker): yearRange -> yearRows and yearColumns
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: yearRange is replaced by yearRows and yearColumns
fixes #3348
  • Loading branch information
@davious
davious committed Nov 27, 2015
1 parent 8bfeda0 commit 6de9cea
Show file tree
Hide file tree
Showing 4 changed files with 34 additions and 22 deletions.
21 changes: 12 additions & 9 deletions src/datepicker/datepicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
maxMode: 'year',
showWeeks: true,
startingDay: 0,
yearRange: 20,
yearRows: 4,
yearColumns: 5,
minDate: null,
maxDate: null,
shortcutPropagation: false
Expand All @@ -33,7 +34,7 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
});

// Evaled configuration attributes
angular.forEach(['showWeeks', 'startingDay', 'yearRange', 'shortcutPropagation'], function(key) {
angular.forEach(['showWeeks', 'startingDay', 'yearRows', 'yearColumns', 'shortcutPropagation'], function(key) {
self[key] = angular.isDefined($attrs[key]) ? $scope.$parent.$eval($attrs[key]) : datepickerConfig[key];
});

Expand Down Expand Up @@ -396,15 +397,16 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
}])

.controller('UibYearpickerController', ['$scope', '$element', 'dateFilter', function(scope, $element, dateFilter) {
var range;
var columns, range;
this.element = $element;

function getStartingYear(year) {
return parseInt((year - 1) / range, 10) * range + 1;
}

this.yearpickerInit = function() {
range = this.yearRange;
columns = this.yearColumns;
range = this.yearRows * columns;
this.step = { years: range };
};

Expand All @@ -420,7 +422,8 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
}

scope.title = [years[0].label, years[range - 1].label].join(' - ');
scope.rows = this.split(years, 5);
scope.rows = this.split(years, columns);
scope.columns = columns;
};

this.compare = function(date1, date2) {
Expand All @@ -433,13 +436,13 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
if (key === 'left') {
date = date - 1;
} else if (key === 'up') {
date = date - 5;
date = date - columns;
} else if (key === 'right') {
date = date + 1;
} else if (key === 'down') {
date = date + 5;
date = date + columns;
} else if (key === 'pageup' || key === 'pagedown') {
date += (key === 'pageup' ? - 1 : 1) * this.step.years;
date += (key === 'pageup' ? - 1 : 1) * range;
} else if (key === 'home') {
date = getStartingYear(this.activeDate.getFullYear());
} else if (key === 'end') {
Expand Down Expand Up @@ -651,7 +654,7 @@ function(scope, element, attrs, $compile, $parse, $document, $rootScope, $positi
datepickerEl.attr('date-disabled', 'dateDisabled({ date: date, mode: mode })');
}

angular.forEach(['formatDay', 'formatMonth', 'formatYear', 'formatDayHeader', 'formatDayTitle', 'formatMonthTitle', 'showWeeks', 'startingDay', 'yearRange'], function(key) {
angular.forEach(['formatDay', 'formatMonth', 'formatYear', 'formatDayHeader', 'formatDayTitle', 'formatMonthTitle', 'showWeeks', 'startingDay', 'yearRows', 'yearColumns'], function(key) {
if (angular.isDefined(attrs[key])) {
datepickerEl.attr(cameltoDash(key), attrs[key]);
}
Expand Down
10 changes: 7 additions & 3 deletions src/datepicker/docs/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,9 +91,13 @@ The datepicker has 3 modes:
_(Default: `uib/template/datepicker/datepicker.html`)_ -
Add the ability to override the template used on the component.

* `year-range`
_(Default: `20`)_ -
Number of years displayed in year selection.
* `year-rows`
_(Default: `4`)_ -
Number of rows displayed in year selection.

* `year-columns`
_(Default: `5`)_ -
Number of columns displayed in year selection.

### uib-datepicker-popup settings ###

Expand Down
23 changes: 14 additions & 9 deletions src/datepicker/test/datepicker.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1108,7 +1108,8 @@ describe('datepicker', function() {
'format-month="MMM"' +
'format-month-title="yy"' +
'format-year="yy"' +
'year-range="10"></uib-datepicker>')($rootScope);
'year-rows="3"' +
'year-columns="4"></uib-datepicker>')($rootScope);
$rootScope.$digest();
});

Expand All @@ -1132,10 +1133,11 @@ describe('datepicker', function() {
clickTitleButton();
clickTitleButton();

expect(getTitle()).toBe('01 - 10');
expect(getTitle()).toBe('05 - 16');
expect(getOptions()).toEqual([
['01', '02', '03', '04', '05'],
['06', '07', '08', '09', '10']
['05', '06', '07', '08'],
['09', '10', '11', '12'],
['13', '14', '15', '16']
]);
});

Expand Down Expand Up @@ -1166,7 +1168,8 @@ describe('datepicker', function() {
uibDatepickerConfig.formatDayTitle = 'MMM, yy';
uibDatepickerConfig.formatMonthTitle = 'yy';
uibDatepickerConfig.showWeeks = false;
uibDatepickerConfig.yearRange = 10;
uibDatepickerConfig.yearRows = 2;
uibDatepickerConfig.yearColumns = 5;
uibDatepickerConfig.startingDay = 6;

element = $compile('<uib-datepicker ng-model="date"></uib-datepicker>')($rootScope);
Expand Down Expand Up @@ -2397,7 +2400,8 @@ describe('datepicker', function() {
'format-month="MMM"' +
'format-month-title="yy"' +
'format-year="yy"' +
'year-range="10" /></div>')($rootScope);
'year-rows="3"' +
'year-columns="4"></uib-datepicker>')($rootScope);
$rootScope.$digest();
assignElements(wrapElement);
});
Expand All @@ -2423,10 +2427,11 @@ describe('datepicker', function() {
assignElements(wrapElement);
clickTitleButton();
assignElements(wrapElement);
expect(getTitle()).toBe('01 - 10');
expect(getTitle()).toBe('05 - 16');
expect(getOptions()).toEqual([
['01', '02', '03', '04', '05'],
['06', '07', '08', '09', '10']
['05', '06', '07', '08'],
['09', '10', '11', '12'],
['13', '14', '15', '16']
]);
});

Expand Down
2 changes: 1 addition & 1 deletion template/datepicker/year.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<thead>
<tr>
<th><button type="button" class="btn btn-default btn-sm pull-left uib-left" ng-click="move(-1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-left"></i></button></th>
<th colspan="3"><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" style="width:100%;"><strong>{{title}}</strong></button></th>
<th colspan="{{::columns - 2}}"><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" style="width:100%;"><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 class="glyphicon glyphicon-chevron-right"></i></button></th>
</tr>
</thead>
Expand Down

0 comments on commit 6de9cea

Please sign in to comment.