From 879adb797d39aaf49b94d54a8ff208a7b5eac912 Mon Sep 17 00:00:00 2001 From: svetoldo4444ka Date: Thu, 22 Feb 2018 16:38:53 +0200 Subject: [PATCH] =?UTF-8?q?docs(datepicker):=20decompose=20Basic=20demo=20?= =?UTF-8?q?(remove=20presetting=20dates=20for=20d=E2=80=A6=20(#3673)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs(datepicker): decompose Basic demo (remove presetting dates for datepicker and daterangepicker) * docs(datepicker): decompose Basic demo * docs(datepicker): decompose Basic demo --- .../+datepicker/datepicker-section.list.ts | 17 ++++++++++++----- .../+datepicker/demos/basic/basic.html | 15 +++++++++++++++ .../components/+datepicker/demos/basic/basic.ts | 7 +++++++ .../demos/bs-popup/date-picker-popup.ts | 13 ------------- .../date-initial-state.html} | 9 ++++----- .../date-initial-state/date-initial-state.ts | 15 +++++++++++++++ .../app/components/+datepicker/demos/index.ts | 6 ++++-- 7 files changed, 57 insertions(+), 25 deletions(-) create mode 100644 demo/src/app/components/+datepicker/demos/basic/basic.html create mode 100644 demo/src/app/components/+datepicker/demos/basic/basic.ts delete mode 100644 demo/src/app/components/+datepicker/demos/bs-popup/date-picker-popup.ts rename demo/src/app/components/+datepicker/demos/{bs-popup/date-picker-popup.html => date-initial-state/date-initial-state.html} (78%) create mode 100644 demo/src/app/components/+datepicker/demos/date-initial-state/date-initial-state.ts diff --git a/demo/src/app/components/+datepicker/datepicker-section.list.ts b/demo/src/app/components/+datepicker/datepicker-section.list.ts index 705e10658c..9745be114a 100644 --- 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: ` -

BsDatepickerModule is activily developed but you can use it already

Notable change is additional css for it "/datepicker/bs-datepicker.css"

There are two ways of adding css:

`, - 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 new file mode 100644 index 0000000000..35c06daea8 --- /dev/null +++ b/demo/src/app/components/+datepicker/demos/basic/basic.html @@ -0,0 +1,15 @@ +
+
+ +
+
+ +
+
+ diff --git a/demo/src/app/components/+datepicker/demos/basic/basic.ts b/demo/src/app/components/+datepicker/demos/basic/basic.ts new file mode 100644 index 0000000000..4d6f1369ea --- /dev/null +++ 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 deleted file mode 100644 index 0c69979324..0000000000 --- a/demo/src/app/components/+datepicker/demos/bs-popup/date-picker-popup.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'demo-date-picker-popup', - templateUrl: './date-picker-popup.html' -}) -export class DemoDatePickerPopupComponent { - minDate = new Date(2017, 5, 10); - maxDate = new Date(2018, 9, 15); - - bsValue: Date = new Date(); - bsRangeValue: any = [new Date(2017, 7, 4), new Date(2017, 7, 20)]; -} diff --git a/demo/src/app/components/+datepicker/demos/bs-popup/date-picker-popup.html b/demo/src/app/components/+datepicker/demos/date-initial-state/date-initial-state.html similarity index 78% rename from demo/src/app/components/+datepicker/demos/bs-popup/date-picker-popup.html rename to demo/src/app/components/+datepicker/demos/date-initial-state/date-initial-state.html index c238d0f599..e34993e8a5 100644 --- a/demo/src/app/components/+datepicker/demos/bs-popup/date-picker-popup.html +++ b/demo/src/app/components/+datepicker/demos/date-initial-state/date-initial-state.html @@ -1,18 +1,18 @@ +

bsValue property sets initial state in this example

+ bsDatepicker + [bsValue]="bsValue">
-
+

ngModel property sets two-way data binding in this example

@@ -21,4 +21,3 @@
- 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 new file mode 100644 index 0000000000..3bfbd7f05b --- /dev/null +++ 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 index c016cd502e..7032119a4b 100644 --- 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 ];