feat(datepicker): add monthColumns to DatepickerConfig

src/datepicker/datepicker.js

@@ -16,10 +16,10 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
   maxMode: 'year',
   minDate: null,
   minMode: 'day',
+  monthColumns: 3,
   ngModelOptions: {},
   shortcutPropagation: false,
   showWeeks: true,
-  monthColumns: 3,
   yearColumns: 5,
   yearRows: 4
 })
@@ -53,10 +53,10 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
     'maxMode',
     'minDate',
     'minMode',
+    'monthColumns',
     'showWeeks',
     'shortcutPropagation',
     'startingDay',
-    'monthColumns',
     'yearColumns',
     'yearRows'
   ].forEach(function(key) {
@@ -79,9 +79,9 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
           $interpolate($scope.datepickerOptions[key])($scope.$parent) :
           datepickerConfig[key];
         break;
+      case 'monthColumns':
       case 'showWeeks':
       case 'shortcutPropagation':
-      case 'monthColumns':
       case 'yearColumns':
       case 'yearRows':
         self[key] = angular.isDefined($scope.datepickerOptions[key]) ?
@@ -461,13 +461,11 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
 }])
 
 .controller('UibMonthpickerController', ['$scope', '$element', 'dateFilter', function(scope, $element, dateFilter) {
-  var columns;
   this.step = { years: 1 };
   this.element = $element;
 
   this.init = function(ctrl) {
     angular.extend(ctrl, this);
-    columns = ctrl.monthColumns;
     ctrl.refreshView();
   };
 
@@ -485,8 +483,8 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
     }
 
     scope.title = dateFilter(this.activeDate, this.formatMonthTitle);
-    scope.rows = this.split(months, columns);
-    scope.yearHeaderColspan = columns > 3 ? columns - 2 : 1;
+    scope.rows = this.split(months, this.monthColumns);
+    scope.yearHeaderColspan = this.monthColumns > 3 ? this.monthColumns - 2 : 1;
   };
 
   this.compare = function(date1, date2) {
@@ -503,11 +501,11 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
     if (key === 'left') {
       date = date - 1;
     } else if (key === 'up') {
-      date = date - columns;
+      date = date - this.monthColumns;
     } else if (key === 'right') {
       date = date + 1;
     } else if (key === 'down') {
-      date = date + columns;
+      date = date + this.monthColumns;
     } else if (key === 'pageup' || key === 'pagedown') {
       var year = this.activeDate.getFullYear() + (key === 'pageup' ? - 1 : 1);
       this.activeDate.setFullYear(year);

src/datepicker/docs/readme.md

@@ -104,6 +104,11 @@ Apart from the previous settings, to configure the uib-datepicker you need to cr
     _(Default: `day`)_ -
     Sets a lower limit for mode.
 
+  * `monthColumns`
+    <small class="badge">C</small>
+    _(Default: `3`)_ -
+    Number of columns displayed in month selection.
+
   * `ngModelOptions`
     <small class="badge">C</small>
     _(Default: `null`)_ -
@@ -124,11 +129,6 @@ Apart from the previous settings, to configure the uib-datepicker you need to cr
     *(Default: `$locale.DATETIME_FORMATS.FIRSTDAYOFWEEK`)* -
     Starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday).
 
-  * `monthColumns`
-    <small class="badge">C</small>
-    _(Default: `3`)_ -
-    Number of columns displayed in month selection.
-
   * `yearRows`
     <small class="badge">C</small>
     _(Default: `4`)_ -

src/datepicker/test/datepicker.spec.js

@@ -1357,7 +1357,7 @@ describe('datepicker', function() {
         ]);
       });
 
-      it('changes colspan of yearbutton in month selector to have colspan', function() {
+      it('shows title year button to expand to fill width in `month` mode', function() {
         clickTitleButton();
         expect(getTitleCell().attr('colspan')).toBe('2');
       });