feat(datepicker): add monthColumns attribute

src/datepicker/datepicker.js

@@ -19,7 +19,8 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
   shortcutPropagation: false,
   showWeeks: true,
   yearColumns: 5,
-  yearRows: 4
+  yearRows: 4,
+  monthColumns: 3
 })
 
 .controller('UibDatepickerController', ['$scope', '$attrs', '$parse', '$interpolate', '$locale', '$log', 'dateFilter', 'uibDatepickerConfig', '$datepickerSuppressError', 'uibDatepickerAttributeWarning', 'uibDateParser',
@@ -53,7 +54,8 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
       'shortcutPropagation',
       'startingDay',
       'yearColumns',
-      'yearRows'
+      'yearRows',
+      'monthColumns'
     ].forEach(function(key) {
       switch (key) {
         case 'customClass':
@@ -140,6 +142,7 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
           } else {
             self.activeDate = new Date();
           }
+        case 'monthColumns':
       }
     });
   } else {
@@ -153,7 +156,7 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
     });
 
     // Evaled configuration attributes
-    angular.forEach(['showWeeks', 'yearRows', 'yearColumns', 'shortcutPropagation'], function(key) {
+    angular.forEach(['showWeeks', 'yearRows', 'yearColumns', 'shortcutPropagation', 'monthColumns'], function(key) {
       self[key] = angular.isDefined($attrs[key]) ?
         $scope.$parent.$eval($attrs[key]) : datepickerConfig[key];
 
@@ -554,19 +557,18 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
   };
 }])
 
-.controller('UibMonthpickerController', ['$scope', '$element', 'dateFilter', function(scope, $element, dateFilter) {
+.controller('UibMonthpickerController', ['$scope', '$element', 'dateFilter', function (scope, $element, dateFilter) {
   this.step = { years: 1 };
   this.element = $element;
 
-  this.init = function(ctrl) {
-    angular.extend(ctrl, this);
-    ctrl.refreshView();
+  this.monthpickerInit = function () {
+    columns = this.monthColumns;
   };
 
-  this._refreshView = function() {
+  this._refreshView = function () {
     var months = new Array(12),
-        year = this.activeDate.getFullYear(),
-        date;
+      year = this.activeDate.getFullYear(),
+      date;
 
     for (var i = 0; i < 12; i++) {
       date = new Date(this.activeDate);
@@ -577,30 +579,31 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
     }
 
     scope.title = dateFilter(this.activeDate, this.formatMonthTitle);
-    scope.rows = this.split(months, 3);
+    scope.rows = this.split(months, columns);
+    scope.columns = columns;
   };
 
-  this.compare = function(date1, date2) {
+  this.compare = function (date1, date2) {
     var _date1 = new Date(date1.getFullYear(), date1.getMonth());
     var _date2 = new Date(date2.getFullYear(), date2.getMonth());
     _date1.setFullYear(date1.getFullYear());
     _date2.setFullYear(date2.getFullYear());
     return _date1 - _date2;
   };
 
-  this.handleKeyDown = function(key, evt) {
+  this.handleKeyDown = function (key, evt) {
     var date = this.activeDate.getMonth();
 
     if (key === 'left') {
       date = date - 1;
     } else if (key === 'up') {
-      date = date - 3;
+      date = date - columns;
     } else if (key === 'right') {
       date = date + 1;
     } else if (key === 'down') {
-      date = date + 3;
+      date = date + columns;
     } else if (key === 'pageup' || key === 'pagedown') {
-      var year = this.activeDate.getFullYear() + (key === 'pageup' ? - 1 : 1);
+      var year = this.activeDate.getFullYear() + (key === 'pageup' ? -1 : 1);
       this.activeDate.setFullYear(year);
     } else if (key === 'home') {
       date = 0;
@@ -717,10 +720,11 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
     require: ['^uibDatepicker', 'uibMonthpicker'],
     controller: 'UibMonthpickerController',
     link: function(scope, element, attrs, ctrls) {
-      var datepickerCtrl = ctrls[0],
-        monthpickerCtrl = ctrls[1];
+      var ctrl = ctrls[0];
+      angular.extend(ctrl, ctrls[1]);
+      ctrl.monthpickerInit();
 
-      monthpickerCtrl.init(datepickerCtrl);
+      ctrl.refreshView();
     }
   };
 })

src/datepicker/test/datepicker.spec.js

@@ -2296,6 +2296,35 @@ describe('datepicker', function() {
         });
       });
 
+      describe('monthColumns', function() {
+        beforeEach(function() {
+          $rootScope.datepickerOptions = {
+            formatMonth: 'MMM',
+            monthColumns: 4
+          };
+          element = $compile('<uib-datepicker ng-model="date"' +
+            'datepicker-options="datepickerOptions"></uib-datepicker>')($rootScope);
+          $rootScope.$digest();
+        });
+
+        afterEach(function() {
+          $rootScope.datepickerOptions = {
+            formatMonth: 'MMMM',
+            monthColumns: 3
+          };
+        });
+
+        it('changes the number of rows in `month` mode', function() {
+          clickTitleButton();
+
+          expect(getOptions()).toEqual([
+            ['Jan', 'Feb', 'Mar', 'Apr'],
+            ['May', 'Jun', 'Jul', 'Aug'],
+            ['Sep', 'Oct', 'Nov', 'Dec']
+          ]);
+        });
+      });
+
       describe('showWeeks', function() {
         beforeEach(function() {
           $rootScope.datepickerOptions = {

template/datepicker/month.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><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"><strong>{{title}}</strong></button></th>
+      <th colspan="{{::(columns - 3) + 1}}"><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"><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>