docs(datepicker): decompose Basic demo

demo/src/app/components/+datepicker/datepicker-section.list.ts

@@ -1,4 +1,5 @@
 import { DemoDatepickerBasicComponent } from './demos/basic/basic';
+import { DemoDatepickerDateInitialStateComponent } from './demos/date-initial-state/date-initial-state';
 import { DemoDatepickerColorThemingComponent } from './demos/color-theming/color-theming';
 import { DemoDatepickerChangeLocaleComponent } from './demos/change-locale/change-locale';
 import { DemoDatepickerMinMaxComponent } from './demos/min-max/min-max.component';
@@ -41,6 +42,13 @@ export const demoComponentContent: ContentSection[] = [
         description: `If you need to see a datepicker just add <code>bsDatepicker</code> property to the input`,
         outlet: DemoDatepickerBasicComponent
       },
+      {
+        title: 'Initial state of a date',
+        anchor: 'date-initial-state',
+        component: require('!!raw-loader?lang=typescript!./demos/date-initial-state/date-initial-state.ts'),
+        html: require('!!raw-loader?lang=markup!./demos/date-initial-state/date-initial-state.html'),
+        outlet: DemoDatepickerDateInitialStateComponent
+      },
       {
         title: 'Custom date format',
         anchor: 'format',

demo/src/app/components/+datepicker/demos/basic/basic.html

@@ -1,9 +1,15 @@
 <div class="row">
   <div class="col-xs-12 col-12 col-md-4 form-group">
     <input type="text"
-           placeholder="Please choose a date"
+           placeholder="Datepicker"
            class="form-control"
            bsDatepicker>
   </div>
+  <div class="col-xs-12 col-12 col-md-4 form-group">
+    <input type="text"
+           placeholder="Daterangepicker"
+           class="form-control"
+           bsDaterangepicker>
+  </div>
 </div>
 

demo/src/app/components/+datepicker/demos/date-initial-state/date-initial-state.html

@@ -0,0 +1,23 @@
+<h4>bsValue property sets initial state in this example</h4>
+<div class="row">
+  <div class="col-xs-12 col-12 col-md-4 form-group">
+    <input type="text"
+           class="form-control"
+           #dp="bsDatepicker"
+           bsDatepicker
+           [bsValue]="bsValue">
+  </div>
+  <div class="col-xs-12 col-12 col-md-3 form-group">
+    <button class="btn btn-success" (click)="dp.toggle()">Date Picker</button>
+  </div>
+</div>
+
+<h4>ngModel property sets two-way data binding in this example</h4>
+<div class="row">
+  <div class="col-xs-12 col-12 col-md-4 form-group">
+    <input class="form-control" #drp="bsDaterangepicker" bsDaterangepicker [(ngModel)]="bsRangeValue">
+  </div>
+  <div class="col-xs-12 col-12 col-md-3 form-group">
+    <button class="btn btn-success" (click)="drp.toggle()">Date Range Picker</button>
+  </div>
+</div>

demo/src/app/components/+datepicker/demos/date-initial-state/date-initial-state.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-datepicker-date-initial-state',
+  templateUrl: './date-initial-state.html'
+})
+export class DemoDatepickerDateInitialStateComponent {
+  bsValue: Date = new Date();
+  bsRangeValue: any = [new Date(2017, 7, 4), new Date(2017, 7, 20)];
+}

demo/src/app/components/+datepicker/demos/index.ts

@@ -8,6 +8,7 @@ import { DemoDatepickerFormsComponent } from './forms/forms.component';
 import { DemoDatepickerReactiveFormsComponent } from './reactive-forms/reactive-forms.component';
 import { DemoDatePickerCustomFormatComponent } from './custom-format/date-picker-custom-format';
 import { DemoDatepickerPlacementComponent } from './placement/placement';
+import { DemoDatepickerDateInitialStateComponent } from './date-initial-state/date-initial-state';
 
 export const DEMO_COMPONENTS = [
   DatepickerDemoComponent,
@@ -19,5 +20,6 @@ export const DEMO_COMPONENTS = [
   DemoDatepickerDisabledComponent,
   DemoDatepickerFormsComponent,
   DemoDatepickerReactiveFormsComponent,
-  DemoDatepickerPlacementComponent
+  DemoDatepickerPlacementComponent,
+  DemoDatepickerDateInitialStateComponent
 ];