diff --git a/src/datepicker/datepicker.js b/src/datepicker/datepicker.js
index a66465147d..6db3bf59bf 100644
--- a/src/datepicker/datepicker.js
+++ b/src/datepicker/datepicker.js
@@ -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
@@ -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];
});
@@ -396,7 +397,7 @@ 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) {
@@ -404,7 +405,8 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
}
this.yearpickerInit = function() {
- range = this.yearRange;
+ columns = this.yearColumns;
+ range = this.yearRows * columns;
this.step = { years: range };
};
@@ -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) {
@@ -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') {
@@ -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]);
}
diff --git a/src/datepicker/docs/readme.md b/src/datepicker/docs/readme.md
index 5d020916f9..a6dac98c88 100644
--- a/src/datepicker/docs/readme.md
+++ b/src/datepicker/docs/readme.md
@@ -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 ###
diff --git a/src/datepicker/test/datepicker.spec.js b/src/datepicker/test/datepicker.spec.js
index 972bb57a8c..a00e6fedb8 100644
--- a/src/datepicker/test/datepicker.spec.js
+++ b/src/datepicker/test/datepicker.spec.js
@@ -1108,7 +1108,8 @@ describe('datepicker', function() {
'format-month="MMM"' +
'format-month-title="yy"' +
'format-year="yy"' +
- 'year-range="10">')($rootScope);
+ 'year-rows="3"' +
+ 'year-columns="4">')($rootScope);
$rootScope.$digest();
});
@@ -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']
]);
});
@@ -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('')($rootScope);
@@ -2397,7 +2400,8 @@ describe('datepicker', function() {
'format-month="MMM"' +
'format-month-title="yy"' +
'format-year="yy"' +
- 'year-range="10" />')($rootScope);
+ 'year-rows="3"' +
+ 'year-columns="4">')($rootScope);
$rootScope.$digest();
assignElements(wrapElement);
});
@@ -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']
]);
});
diff --git a/template/datepicker/year.html b/template/datepicker/year.html
index e204067dc2..8abe9a73d3 100644
--- a/template/datepicker/year.html
+++ b/template/datepicker/year.html
@@ -2,7 +2,7 @@
|
- |
+ |
|