feat(datepicker): Added configurable limit for amount of items displa…

…yed in a single row of monthpicker and yearpicker (#1141)

* Added configurable column limit for yearpicker and monthpicker

* Recalculate toggle button container collspan automatically

components/datepicker/datepicker-inner.component.ts

@@ -15,6 +15,8 @@ const SHOW_WEEKS = true;
 const ONLY_CURRENT_MONTH = false;
 const STARTING_DAY = 0;
 const YEAR_RANGE = 20;
+const MONTH_COL_LIMIT = 3;
+const YEAR_COL_LIMIT = 5;
 // const MIN_DATE:Date = void 0;
 // const MAX_DATE:Date = void 0;
 const SHORTCUT_PROPAGATION = false;
@@ -63,6 +65,8 @@ export class DatePickerInnerComponent implements OnInit, OnChanges {
   @Input() public onlyCurrentMonth: boolean;
   @Input() public shortcutPropagation: boolean;
   @Input() public customClass: Array<{date: Date, mode: string, clazz: string}>;
+  @Input() public monthColLimit: number;
+  @Input() public yearColLimit: number;
   // todo: change type during implementation
   @Input() public dateDisabled: any;
   @Input() public initDate: Date;
@@ -118,6 +122,8 @@ export class DatePickerInnerComponent implements OnInit, OnChanges {
     this.datepickerMode = this.datepickerMode || DATEPICKER_MODE;
     this.minMode = this.minMode || MIN_MODE;
     this.maxMode = this.maxMode || MAX_MODE;
+    this.monthColLimit = this.monthColLimit || MONTH_COL_LIMIT;
+    this.yearColLimit = this.yearColLimit || YEAR_COL_LIMIT;
 
     // todo: use date for unique value
     this.uniqueId = 'datepicker-' + '-' + Math.floor(Math.random() * 10000);

components/datepicker/datepicker.component.ts

@@ -27,6 +27,8 @@ import { ControlValueAccessor, NgModel } from '@angular/forms';
                       [dateDisabled]="dateDisabled"
                       [onlyCurrentMonth]="onlyCurrentMonth"
                       [shortcutPropagation]="shortcutPropagation"
+                      [monthColLimit]="monthColLimit"
+                      [yearColLimit]="yearColLimit"
                       (selectionDone)="onSelectionDone($event)">
       <daypicker tabindex="0"></daypicker>
       <monthpicker tabindex="0"></monthpicker>
@@ -55,6 +57,8 @@ export class DatePickerComponent implements ControlValueAccessor {
   @Input() public onlyCurrentMonth:boolean;
   @Input() public shortcutPropagation:boolean;
   @Input() public customClass:Array<{date:Date, mode:string, clazz:string}>;
+  @Input() public monthColLimit: number;
+  @Input() public yearColLimit: number;
 // todo: change type during implementation
   @Input() public dateDisabled:any;
 

components/datepicker/monthpicker.component.ts

@@ -14,7 +14,7 @@ import { DatePickerInnerComponent } from './datepicker-inner.component';
                 (click)="datePicker.move(-1)" tabindex="-1">
           <i class="glyphicon glyphicon-chevron-left"></i>
         </button></th>
-      <th>
+      <th [attr.colspan]="((datePicker.monthColLimit - 2) <= 0) ? 1 : datePicker.monthColLimit - 2">
         <button [id]="datePicker.uniqueId + '-title'"
                 type="button" class="btn btn-default btn-sm"
                 (click)="datePicker.toggleMode()"
@@ -77,7 +77,7 @@ export class MonthPickerComponent implements OnInit {
       }
 
       self.title = this.dateFilter(this.activeDate, this.formatMonthTitle);
-      self.rows = this.split(months, 3);
+      self.rows = this.split(months, self.datePicker.monthColLimit);
     }, 'month');
 
     this.datePicker.setCompareHandler(function (date1:Date, date2:Date):number {

components/datepicker/readme.md

@@ -34,6 +34,8 @@ import { DatepickerModule } from 'ng2-bootstrap/components/datepicker';
   - `yearRange` (`?number=20`) - number of years displayed in year selection
   - `shortcutPropagation` (`?boolean=false`) - if `true` shortcut`s event propagation will be disabled
   - `onlyCurrentMonth` (`?boolean=false`) - if `true` only dates from the currently displayed month will be shown
+  - `monthColLimit` (`?number=3`) - number of months displayed in a single row of month picker
+  - `yearColLimit` (`?number=5`) - number of years displayed in a single row of year picker
 
 <!--
 ### Date picker popup properties

components/datepicker/yearpicker.component.ts

@@ -15,7 +15,7 @@ import { DatePickerInnerComponent } from './datepicker-inner.component';
           <i class="glyphicon glyphicon-chevron-left"></i>
         </button>
       </th>
-      <th colspan="3">
+      <th [attr.colspan]="((datePicker.yearColLimit - 2) <= 0) ? 1 : datePicker.yearColLimit - 2">
         <button [id]="datePicker.uniqueId + '-title'" role="heading"
                 type="button" class="btn btn-default btn-sm"
                 (click)="datePicker.toggleMode()"
@@ -79,7 +79,7 @@ export class YearPickerComponent implements OnInit {
 
       self.title = [years[0].label,
         years[this.yearRange - 1].label].join(' - ');
-      self.rows = this.split(years, 5);
+      self.rows = this.split(years, self.datePicker.yearColLimit);
     }, 'year');
 
     this.datePicker.setCompareHandler(function (date1:Date, date2:Date):number {