feat(datepicker): add monthColumns

- Add `monthColumns` option Closes #5515 Closes #5935
angular-ui · Jun 27, 2016 · 39d9b98 · 39d9b98
1 parent 2d831bc
commit 39d9b98
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 10 deletions.
diff --git a/src/datepicker/datepicker.js b/src/datepicker/datepicker.js
@@ -16,6 +16,7 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
   maxMode: 'year',
   minDate: null,
   minMode: 'day',
+  monthColumns: 3,
   ngModelOptions: {},
   shortcutPropagation: false,
   showWeeks: true,
@@ -54,6 +55,7 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
     'maxMode',
     'minDate',
     'minMode',
+    'monthColumns',
     'showWeeks',
     'shortcutPropagation',
     'startingDay',
@@ -79,6 +81,7 @@ 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 'yearColumns':
@@ -488,7 +491,8 @@ 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, this.monthColumns);
+    scope.yearHeaderColspan = this.monthColumns > 3 ? this.monthColumns - 2 : 1;
   };
 
   this.compare = function(date1, date2) {
@@ -505,11 +509,11 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
     if (key === 'left') {
       date = date - 1;
     } else if (key === 'up') {
-      date = date - 3;
+      date = date - this.monthColumns;
     } else if (key === 'right') {
       date = date + 1;
     } else if (key === 'down') {
-      date = date + 3;
+      date = date + this.monthColumns;
     } else if (key === 'pageup' || key === 'pagedown') {
       var year = this.activeDate.getFullYear() + (key === 'pageup' ? - 1 : 1);
       this.activeDate.setFullYear(year);

diff --git a/src/datepicker/docs/readme.md b/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`)_ -
@@ -123,7 +128,7 @@ Apart from the previous settings, to configure the uib-datepicker you need to cr
     <small class="badge">C</small>
     *(Default: `$locale.DATETIME_FORMATS.FIRSTDAYOFWEEK`)* -
     Starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday).
-
+    
   * `yearRows`
     <small class="badge">C</small>
     _(Default: `4`)_ -

diff --git a/src/datepicker/test/datepicker.spec.js b/src/datepicker/test/datepicker.spec.js
@@ -26,8 +26,12 @@ describe('datepicker', function() {
     });
   }));
 
+  function getTitleCell() {
+    return element.find('th').eq(1);
+  }
+
   function getTitleButton() {
-    return element.find('th').eq(1).find('button').first();
+    return getTitleCell().find('button').first();
   }
 
   function getTitle() {
@@ -1325,6 +1329,7 @@ describe('datepicker', function() {
         uibDatepickerConfig.yearRows = 2;
         uibDatepickerConfig.yearColumns = 5;
         uibDatepickerConfig.startingDay = 6;
+        uibDatepickerConfig.monthColumns = 4;
 
         element = $compile('<div uib-datepicker ng-model="date"></div>')($rootScope);
         $rootScope.$digest();
@@ -1346,13 +1351,17 @@ describe('datepicker', function() {
 
         expect(getTitle()).toBe('10');
         expect(getOptions()).toEqual([
-          ['Jan', 'Feb', 'Mar'],
-          ['Apr', 'May', 'Jun'],
-          ['Jul', 'Aug', 'Sep'],
-          ['Oct', 'Nov', 'Dec']
+          ['Jan', 'Feb', 'Mar', 'Apr'],
+          ['May', 'Jun', 'Jul', 'Aug'],
+          ['Sep', 'Oct', 'Nov', 'Dec']
         ]);
       });
 
+      it('shows title year button to expand to fill width in `month` mode', function() {
+        clickTitleButton();
+        expect(getTitleCell().attr('colspan')).toBe('2');
+      });
+
       it('changes the title, year format & range in `year` mode', function() {
         clickTitleButton();
         clickTitleButton();

diff --git a/template/datepicker/month.html b/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="{{::yearHeaderColspan}}"><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>