docs(datepicker): add demo for isOpen state

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

@@ -5,6 +5,7 @@ import { DemoDatepickerMinMaxComponent } from './demos/min-max/min-max.component
 import { DemoDatepickerDisabledComponent } from './demos/disabled/disabled.component';
 import { DemoDatepickerFormsComponent } from './demos/forms/forms.component';
 import { DemoDatepickerReactiveFormsComponent } from './demos/reactive-forms/reactive-forms.component';
+import { DemoDatepickerIsOpenComponent } from './demos/is-open/is-open';
 import { DatepickerDemoComponent } from './demos/datepicker-demo.component';
 import { DemoDatepickerPlacementComponent } from './demos/placement/placement';
 
@@ -140,6 +141,14 @@ export const demoComponentContent: ContentSection[] = [
         html: require('!!raw-loader?lang=markup!./demos/placement/placement.html'),
         description: `<p>Add <code>placement</code> property if you want to change placement</p>`,
         outlet: DemoDatepickerPlacementComponent
+      },
+      {
+        title: 'IsOpen property',
+        anchor: 'is-open',
+        component: require('!!raw-loader?lang=typescript!./demos/is-open/is-open.ts'),
+        html: require('!!raw-loader?lang=markup!./demos/is-open/is-open.html'),
+        description: `<p>The datepicker's closed by default. To change this behavior, use <code>isOpen</code> property.</p>`,
+        outlet: DemoDatepickerIsOpenComponent
       }
     ]
   },

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 { DemoDatepickerIsOpenComponent } from './is-open/is-open';
 
 export const DEMO_COMPONENTS = [
   DatepickerDemoComponent,
@@ -19,5 +20,6 @@ export const DEMO_COMPONENTS = [
   DemoDatepickerDisabledComponent,
   DemoDatepickerFormsComponent,
   DemoDatepickerReactiveFormsComponent,
-  DemoDatepickerPlacementComponent
+  DemoDatepickerPlacementComponent,
+  DemoDatepickerIsOpenComponent
 ];

demo/src/app/components/+datepicker/demos/is-open/is-open.html

@@ -0,0 +1,8 @@
+<div class="row">
+  <div class="col-xs-8 col-8 col-md-5 col-lg-4 form-group">
+    <input class="form-control" placeholder="Please choose a date" bsDatepicker [isOpen]="isOpen" />
+  </div>
+  <div class="col-xs-4 col-4 col-md-4 form-group">
+    <input class="btn btn-success" type="button" value="Toggle" (click)="isOpen = !isOpen">
+  </div>
+</div>

demo/src/app/components/+datepicker/demos/is-open/is-open.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-datepicker-is-open',
+  templateUrl: './is-open.html'
+})
+export class DemoDatepickerIsOpenComponent {
+  isOpen = true;
+}
+