feat(datepicker): yearRange -> yearRows and yearColumns

BREAKING CHANGE: yearRange is replaced by yearRows and yearColumns for manually specifying the dimensions of the yearpicker. If one wants the prior behavior with yearRange with a different number of rows, just set yearRows

Closes #3348
Closes #4970

Author: davious

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,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 };
   };
 
@@ -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]);
       }

src/datepicker/docs/readme.md

@@ -91,10 +91,14 @@ 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.
+
 * `ng-model-options`
   _(Default: {})_ -
   allowInvalid support. [More on ngModelOptions](https://docs.angularjs.org/api/ng/directive/ngModelOptions).

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"></uib-datepicker>')($rootScope);
+          'year-rows="3"' +
+          'year-columns="4"></uib-datepicker>')($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('<uib-datepicker ng-model="date"></uib-datepicker>')($rootScope);
@@ -2435,7 +2438,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);
           });
@@ -2461,10 +2465,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']
             ]);
           });
 

template/datepicker/year.html

@@ -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>