Added configurable limit for amount of items displayed in a single row of monthpicker and yearpicker

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 {