From 562050d8c47b27e081f46bd7e7e5d5424162b97b Mon Sep 17 00:00:00 2001
From: Eduard Kyvenko <eduard@dinero.dk>
Date: Tue, 18 Oct 2016 17:24:07 +0200
Subject: [PATCH 1/2] Added configurable column limit for yearpicker and
 monthpicker

---
 components/datepicker/datepicker-inner.component.ts | 6 ++++++
 components/datepicker/datepicker.component.ts       | 4 ++++
 components/datepicker/monthpicker.component.ts      | 2 +-
 components/datepicker/readme.md                     | 2 ++
 components/datepicker/yearpicker.component.ts       | 2 +-
 5 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/components/datepicker/datepicker-inner.component.ts b/components/datepicker/datepicker-inner.component.ts
index ad5dc0bfef..0fc0826ed7 100644
--- a/components/datepicker/datepicker-inner.component.ts
+++ b/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);
diff --git a/components/datepicker/datepicker.component.ts b/components/datepicker/datepicker.component.ts
index 928d7970f0..56ea46fe74 100644
--- a/components/datepicker/datepicker.component.ts
+++ b/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;
 
diff --git a/components/datepicker/monthpicker.component.ts b/components/datepicker/monthpicker.component.ts
index 366acd440f..e7b4b0b950 100644
--- a/components/datepicker/monthpicker.component.ts
+++ b/components/datepicker/monthpicker.component.ts
@@ -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 {
diff --git a/components/datepicker/readme.md b/components/datepicker/readme.md
index f58f25e1bc..0b11eb29e8 100644
--- a/components/datepicker/readme.md
+++ b/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
diff --git a/components/datepicker/yearpicker.component.ts b/components/datepicker/yearpicker.component.ts
index e8acab91d4..8e25515cbe 100644
--- a/components/datepicker/yearpicker.component.ts
+++ b/components/datepicker/yearpicker.component.ts
@@ -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 {

From 012270b799629393053596060625d90371878444 Mon Sep 17 00:00:00 2001
From: Eduard Kyvenko <eduard@dinero.dk>
Date: Thu, 20 Oct 2016 16:07:16 +0200
Subject: [PATCH 2/2] Recalculate toggle button container collspan
 automatically

---
 components/datepicker/monthpicker.component.ts | 2 +-
 components/datepicker/yearpicker.component.ts  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/datepicker/monthpicker.component.ts b/components/datepicker/monthpicker.component.ts
index e7b4b0b950..92047fa54e 100644
--- a/components/datepicker/monthpicker.component.ts
+++ b/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()"
diff --git a/components/datepicker/yearpicker.component.ts b/components/datepicker/yearpicker.component.ts
index 8e25515cbe..70d77189c7 100644
--- a/components/datepicker/yearpicker.component.ts
+++ b/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()"