fix(datepicker): prevent outside click to close datepicker on navigation

demo/src/app/components/+datepicker/demos/bs-popup/date-picker-popup.ts

@@ -5,6 +5,6 @@ import { Component } from '@angular/core';
   templateUrl: './date-picker-popup.html'
 })
 export class DemoDatePickerPopupComponent {
-  public bsValue: any = new Date(2017, 7, 4);
+  public bsValue: any ;
   public bsRangeValue: any = [new Date(2017, 7, 4), new Date(2017, 7, 20)];
 }

src/datepicker/themes/bs/bs-datepicker-container.component.ts

@@ -12,7 +12,6 @@ import 'rxjs/add/operator/filter';
   providers: [BsDatepickerStore],
   template: `
     <bs-datepicker-view
-      *ngIf="months && options"
       [months]="months"
       [options]="options"
       (onNavigate)="navigateTo($event)"
@@ -21,6 +20,7 @@ import 'rxjs/add/operator/filter';
     ></bs-datepicker-view>
   `,
   host: {
+    '(click)': '_stopPropagation($event)',
     style: 'position: absolute; display: block;'
   }
 })
@@ -52,7 +52,6 @@ export class BsDatepickerContainerComponent {
       showWeekNumbers: true
     }));
 
-
     // on selected date change
     this._bsDatepickerStore.select(state => state.selectedDate)
       .subscribe(date => this.valueChange.emit(date));
@@ -109,4 +108,8 @@ export class BsDatepickerContainerComponent {
     }
     this._bsDatepickerStore.dispatch(this._actions.select(day.date));
   }
+
+  _stopPropagation(event: any): void {
+    event.stopPropagation();
+  }
 }

src/datepicker/themes/bs/bs-datepicker-navigation-view.component.ts

@@ -9,9 +9,9 @@ import { BsNavigationEvent, MonthViewModel, TimeUnit } from '../../models/index'
             [style.visibility]="month.hideLeftArrow ? 'hidden' : 'visible'"
             (click)="navTo({month: -1})"><span>&lsaquo;</span>
     </button>
-    <button class="current" (click)="viewMode('months')"><span>{{month.monthTitle}}</span>
+    <button class="current"><span>{{ month.monthTitle }}</span>
     </button>
-    <button class="current" (click)="viewMode('years')"><span>{{month.yearTitle}}</span>
+    <button class="current"><span>{{ month.yearTitle }}</span>
     </button>
     <button class="next"
             [style.visibility]="month.hideRightArrow ? 'hidden' : 'visible'"
@@ -26,6 +26,4 @@ export class BsDatepickerNavigationViewComponent {
   navTo(step: TimeUnit): void {
     this.onNavigate.emit({step});
   }
-
-  viewMode(v: string) {}
 }

src/datepicker/themes/bs/bs-daterangepicker-container.component.ts

@@ -21,6 +21,7 @@ import 'rxjs/add/operator/filter';
     ></bs-datepicker-view>
   `,
   host: {
+    '(click)': '_stopPropagation($event)',
     style: 'position: absolute; display: block;'
   }
 })
@@ -130,4 +131,8 @@ export class BsDaterangepickerContainerComponent implements OnInit {
       this._rangeStack = [];
     }
   }
+
+  _stopPropagation(event: any): void {
+    event.stopPropagation();
+  }
 }