docs(datepicker): add demo for isOpen state (valor-software#3647)

azavea · Feb 22, 2018 · 697dc87 · 697dc87
1 parent 7d10900
commit 697dc87
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 0 deletions.
diff --git a/demo/src/app/components/+datepicker/datepicker-section.list.ts b/demo/src/app/components/+datepicker/datepicker-section.list.ts
@@ -6,6 +6,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';
 import { DemoDatepickerTriggersComponent } from './demos/triggers/triggers';
@@ -149,6 +150,14 @@ export const demoComponentContent: ContentSection[] = [
         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
+      },
       {
         title: 'Triggers',
         anchor: 'triggers',

diff --git a/demo/src/app/components/+datepicker/demos/index.ts b/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';
 import { DemoDatepickerDateInitialStateComponent } from './date-initial-state/date-initial-state';
 import { DemoDatepickerTriggersComponent } from './triggers/triggers';
 
@@ -22,6 +23,7 @@ export const DEMO_COMPONENTS = [
   DemoDatepickerFormsComponent,
   DemoDatepickerReactiveFormsComponent,
   DemoDatepickerPlacementComponent,
+  DemoDatepickerIsOpenComponent,
   DemoDatepickerDateInitialStateComponent,
   DemoDatepickerTriggersComponent
 ];
diff --git a/demo/src/app/components/+datepicker/demos/is-open/is-open.html b/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>
diff --git a/demo/src/app/components/+datepicker/demos/is-open/is-open.ts b/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;
+}
+