docs(datepicker): decompose Basic demo (remove presetting dates for d… (

#3673) * docs(datepicker): decompose Basic demo (remove presetting dates for datepicker and daterangepicker) * docs(datepicker): decompose Basic demo * docs(datepicker): decompose Basic demo
valor-software · Feb 22, 2018 · 879adb7 · 879adb7
1 parent f6bbb3d
commit 879adb7
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 25 deletions.
diff --git a/demo/src/app/components/+datepicker/datepicker-section.list.ts b/demo/src/app/components/+datepicker/datepicker-section.list.ts
@@ -1,4 +1,5 @@
-import { DemoDatePickerPopupComponent } from './demos/bs-popup/date-picker-popup';
+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';
@@ -37,10 +38,9 @@ export const demoComponentContent: ContentSection[] = [
       {
         title: 'Basic',
         anchor: 'basic',
-        component: require('!!raw-loader?lang=typescript!./demos/bs-popup/date-picker-popup.ts'),
-        html: require('!!raw-loader?lang=markup!./demos/bs-popup/date-picker-popup.html'),
+        component: require('!!raw-loader?lang=typescript!./demos/basic/basic.ts'),
+        html: require('!!raw-loader?lang=markup!./demos/basic/basic.html'),
         description: `
-          <p><code>BsDatepickerModule</code> is activily developed but you can use it already</p>
           <p>Notable change is additional css for it <code> "/datepicker/bs-datepicker.css"</code> <br></p>
           <p>There are two ways of adding css:</p>
           <ul>
@@ -52,7 +52,14 @@ export const demoComponentContent: ContentSection[] = [
             </li>
           </ul>
         `,
-        outlet: DemoDatePickerPopupComponent
+        outlet: DemoDatepickerBasicComponent
+      },
+      {
+        title: 'Initial state',
+        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',

diff --git a/demo/src/app/components/+datepicker/demos/basic/basic.html b/demo/src/app/components/+datepicker/demos/basic/basic.html
@@ -0,0 +1,15 @@
+<div class="row">
+  <div class="col-xs-12 col-12 col-md-4 form-group">
+    <input type="text"
+           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>
+
diff --git a/demo/src/app/components/+datepicker/demos/basic/basic.ts b/demo/src/app/components/+datepicker/demos/basic/basic.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-datepicker-basic',
+  templateUrl: './basic.html'
+})
+export class DemoDatepickerBasicComponent {}
diff --git a/demo/src/app/components/+datepicker/demos/bs-popup/date-picker-popup.ts b/demo/src/app/components/+datepicker/demos/bs-popup/date-picker-popup.ts
diff --git a/...ker/demos/bs-popup/date-picker-popup.html → ...ate-initial-state/date-initial-state.html b/...ker/demos/bs-popup/date-picker-popup.html → ...ate-initial-state/date-initial-state.html
@@ -1,18 +1,18 @@
+<p>bsValue property sets initial state in this example</p>
 <div class="row">
   <div class="col-xs-12 col-12 col-md-4 form-group">
     <input type="text"
            class="form-control"
-           [minDate]="minDate"
-           [maxDate]="maxDate"
            #dp="bsDatepicker"
-           bsDatepicker [(bsValue)]="bsValue">
+           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>
-<br>
 
+<p>ngModel property sets two-way data binding in this example</p>
 <div class="row">
   <div class="col-xs-12 col-12 col-md-4 form-group">
     <input class="form-control" #drp="bsDaterangepicker" bsDaterangepicker [(ngModel)]="bsRangeValue">
@@ -21,4 +21,3 @@
     <button class="btn btn-success" (click)="drp.toggle()">Date Range Picker</button>
   </div>
 </div>
-
diff --git a/demo/src/app/components/+datepicker/demos/date-initial-state/date-initial-state.ts b/demo/src/app/components/+datepicker/demos/date-initial-state/date-initial-state.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-datepicker-date-initial-state',
+  templateUrl: './date-initial-state.html'
+})
+export class DemoDatepickerDateInitialStateComponent {
+  bsValue = new Date();
+  bsRangeValue: Date[];
+  maxDate = new Date();
+  constructor() {
+    this.maxDate.setDate(this.maxDate.getDate() + 7);
+    this.bsRangeValue = [this.bsValue, this.maxDate];
+  }
+}
diff --git a/demo/src/app/components/+datepicker/demos/index.ts b/demo/src/app/components/+datepicker/demos/index.ts
@@ -1,5 +1,5 @@
 import { DatepickerDemoComponent } from './datepicker-demo.component';
-import { DemoDatePickerPopupComponent } from './bs-popup/date-picker-popup';
+import { DemoDatepickerBasicComponent } from './basic/basic';
 import { DemoDatepickerColorThemingComponent } from './color-theming/color-theming';
 import { DemoDatepickerChangeLocaleComponent } from './change-locale/change-locale';
 import { DemoDatepickerMinMaxComponent } from './min-max/min-max.component';
@@ -8,11 +8,12 @@ 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';
 import { DemoDatepickerTriggersComponent } from './triggers/triggers';
 
 export const DEMO_COMPONENTS = [
   DatepickerDemoComponent,
-  DemoDatePickerPopupComponent,
+  DemoDatepickerBasicComponent,
   DemoDatePickerCustomFormatComponent,
   DemoDatepickerColorThemingComponent,
   DemoDatepickerChangeLocaleComponent,
@@ -21,5 +22,6 @@ export const DEMO_COMPONENTS = [
   DemoDatepickerFormsComponent,
   DemoDatepickerReactiveFormsComponent,
   DemoDatepickerPlacementComponent,
+  DemoDatepickerDateInitialStateComponent,
   DemoDatepickerTriggersComponent
 ];