feat(datepicker): added date range picker config (#3501)

demo/src/ng-api-doc.ts

@@ -776,7 +776,7 @@ export const ngdoc: any = {
   "BsDatepickerConfig": {
     "fileName": "src/datepicker/bs-datepicker.config.ts",
     "className": "BsDatepickerConfig",
-    "description": "",
+    "description": "<p>For date range picker there are <code>BsDaterangepickerConfig</code> which inherits all properties,\nexcept displayMonths, for range picker it default to <code>2</code></p>\n",
     "methods": [],
     "properties": [
       {
@@ -822,7 +822,7 @@ export const ngdoc: any = {
     "inputs": [
       {
         "name": "bsConfig",
-        "type": "Partial<BsDatepickerConfig>",
+        "type": "Partial<BsDaterangepickerConfig>",
         "description": "<p>Config object for daterangepicker</p>\n"
       },
       {
@@ -917,6 +917,13 @@ export const ngdoc: any = {
       }
     ]
   },
+  "BsDaterangepickerConfig": {
+    "fileName": "src/datepicker/bs-daterangepicker.config.ts",
+    "className": "BsDaterangepickerConfig",
+    "description": "",
+    "methods": [],
+    "properties": []
+  },
   "BsLocaleService": {
     "fileName": "src/datepicker/bs-locale.service.ts",
     "className": "BsLocaleService",

src/datepicker/bs-datepicker.config.ts

@@ -1,9 +1,13 @@
 import { Injectable } from '@angular/core';
 import {
-  DatepickerFormatOptions,
   DatepickerRenderOptions
 } from './models/index';
 
+
+/**
+ * For date range picker there are `BsDaterangepickerConfig` which inherits all properties,
+ * except `displayMonths`, for range picker it default to `2`
+ */
 @Injectable()
 export class BsDatepickerConfig
   implements DatepickerRenderOptions {

src/datepicker/bs-daterangepicker.component.ts

@@ -2,6 +2,7 @@ import {
   ComponentRef, Directive, ElementRef, EventEmitter, Input, OnChanges,
   OnDestroy, OnInit, Output, Renderer2, SimpleChanges, ViewContainerRef
 } from '@angular/core';
+import { BsDaterangepickerConfig } from './bs-daterangepicker.config';
 import { BsDaterangepickerContainerComponent } from './themes/bs/bs-daterangepicker-container.component';
 import { Subscription } from 'rxjs/Subscription';
 import { ComponentLoaderFactory } from '../component-loader/component-loader.factory';
@@ -74,7 +75,7 @@ export class BsDaterangepickerDirective
   /**
    * Config object for daterangepicker
    */
-  @Input() bsConfig: Partial<BsDatepickerConfig>;
+  @Input() bsConfig: Partial<BsDaterangepickerConfig>;
   /**
    * Indicates whether daterangepicker is enabled or not
    */
@@ -97,7 +98,7 @@ export class BsDaterangepickerDirective
   private _datepicker: ComponentLoader<BsDaterangepickerContainerComponent>;
   private _datepickerRef: ComponentRef<BsDaterangepickerContainerComponent>;
 
-  constructor(public _config: BsDatepickerConfig,
+  constructor(public _config: BsDaterangepickerConfig,
               _elementRef: ElementRef,
               _renderer: Renderer2,
               _viewContainerRef: ViewContainerRef,
@@ -182,7 +183,6 @@ export class BsDaterangepickerDirective
     this._config = Object.assign(
       {},
       this._config,
-      {displayMonths: 2},
       this.bsConfig,
       {
         value: this._bsValue,

src/datepicker/bs-daterangepicker.config.ts

@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+import { BsDatepickerConfig } from './bs-datepicker.config';
+
+@Injectable()
+export class BsDaterangepickerConfig extends BsDatepickerConfig {
+  // DatepickerRenderOptions
+  displayMonths = 2;
+}

src/datepicker/datepicker.module.ts

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule, ModuleWithProviders } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { BsDaterangepickerConfig } from './bs-daterangepicker.config';
 
 import { DatePickerInnerComponent } from './datepicker-inner.component';
 import { DatePickerComponent } from './datepicker.component';
@@ -29,6 +30,6 @@ import { DatepickerConfig } from './datepicker.config';
 })
 export class DatepickerModule {
   static forRoot(): ModuleWithProviders {
-    return { ngModule: DatepickerModule, providers: [DatepickerConfig] };
+    return { ngModule: DatepickerModule, providers: [DatepickerConfig, BsDaterangepickerConfig] };
   }
 }

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

@@ -7,7 +7,6 @@ import { BsDatepickerActions } from '../../reducer/bs-datepicker.actions';
 import { BsDatepickerEffects } from '../../reducer/bs-datepicker.effects';
 import { BsDatepickerStore } from '../../reducer/bs-datepicker.store';
 import { Subscription } from 'rxjs/Subscription';
-import { BsLocaleService } from '../../bs-locale.service';
 
 @Component({
   selector: 'bs-datepicker-container',