diff --git a/demo/src/app/components/+datepicker/datepicker-section.component.ts b/demo/src/app/components/+datepicker/datepicker-section.component.ts index d9e6b736a6..c1460d590c 100644 --- a/demo/src/app/components/+datepicker/datepicker-section.component.ts +++ b/demo/src/app/components/+datepicker/datepicker-section.component.ts @@ -2,111 +2,151 @@ import { Component } from '@angular/core'; import { DEMOS } from './demos'; // webpack html imports +let oldTitleDoc = require('html-loader!markdown-loader!./docs/titleOld.md'); let titleDoc = require('html-loader!markdown-loader!./docs/title.md'); @Component({ selector: 'datepicker-section', - template: ` + template: ` -

Datepicker is a highly configurable component that adds datepicker functionality to your pages. You can - customize the date format and language, restrict the selectable date ranges.

- -

Contents

- -

Usage

+

Usage

+ +

-

+

Examples

+

Basic

+ +

BsDatepickerModule is activily developed but you can use it already

+

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

+

There are two ways of adding css:

+ +

In nearest time will be added:

+ + + -

Examples

-

Basic

- -

BsDatepickerModule is activily developed but you can use it already

-

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

-

There are two ways of adding css:

- -

In nearest time will be added:

- - - +

Themes

+ +

Datepicker comes with some default color schemes. + You can change it by manipulating containerClass property in bsConfig object

+

There are 6 color schemes: theme-default, theme-green, theme-blue, + theme-dark-blue, theme-red, theme-orange

+ + -

Themes

- -

Datepicker comes with some default color schemes. - You can change it by manipulating containerClass property in bsConfig object

-

There are 6 color schemes: theme-default, theme-green, theme-blue, - theme-dark-blue, theme-red, theme-orange

- - +

Locales

-

Locales

+ +

Datepicker can use different locales.
It's possible to change a locale by changing locale + property in bsConfig object, list of available locales is in dropdown below.

+

To use a different locale, you have to import it from ngx-bootstrap/bs-moment and define it + in your @NgModule using function defineLocale

+

Example:

+ import {{ '{' }} defineLocale {{ '}' }} from 'ngx-bootstrap/bs-moment';
+ import {{ '{' }} de {{ '}' }} from 'ngx-bootstrap/locale';
+ defineLocale('de', de)); +

+ + - -

Datepicker is fully compatible with any locale. It's possible to change a locale by changing locale property in bsConfig object

- - +

Min-max

+ +

You can set min and max date of datepicker/daterangepicker using minDate and maxDate properties

+

In the following example minDate is set to yesterday and maxDate to the current day in the next week

+ + -

Min-max

- -

You can set min and max date of datepicker/daterangepicker using minDate and maxDate properties

-

In the following example minDate is set to yesterday and maxDate to the current day in the next week

- - +

Disabled (scratch, WIP)

+ +

If you want to disable datepicker set is isDisabled property to true

+ + -

Disabled (scratch, WIP)

- -

If you want to disable datepicker set is isDisabled property to true

- - +

Forms

+ +

Datepicker and daterangepicker can be used in forms. Keep in mind that value of ngModel + is Date object (array of 2 object for daterangepicker)

+ + -

Forms

- - - +

Reactive forms

+ + + + +

API Reference

+ + + + +

This is a legacy version of datepicker without support of daterangepicker, locales, themes, etc.

+

Contents

+ + +

Usage

- - - +

+ +

Example

+ + + -

API Reference

- - - +

API Reference

+ + + ` }) export class DatepickerSectionComponent { public name: string = 'Datepicker'; public src: string = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/datepicker'; public demos: any = DEMOS; + public oldTitleDoc: string = oldTitleDoc; public titleDoc: string = titleDoc; } diff --git a/demo/src/app/components/+datepicker/demo-datepicker.module.ts b/demo/src/app/components/+datepicker/demo-datepicker.module.ts index a8f0e8adb0..b78604affd 100644 --- a/demo/src/app/components/+datepicker/demo-datepicker.module.ts +++ b/demo/src/app/components/+datepicker/demo-datepicker.module.ts @@ -1,15 +1,16 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { DatepickerModule, BsDatepickerModule } from 'ngx-bootstrap/datepicker'; +import { TabsModule } from 'ngx-bootstrap/tabs'; import { SharedModule } from '../../shared'; import { DatepickerSectionComponent } from './datepicker-section.component'; import { DEMO_COMPONENTS } from './demos'; import { routes } from './demo-datepicker.routes'; -import { defineLocale, getSetGlobalLocale } from 'ngx-bootstrap/bs-moment'; +import { defineLocale } from 'ngx-bootstrap/bs-moment'; import { ar, de, enGb, es, esDo, esUs, fr, hi, it, ja, ko, nl, nlBe, pl, ptBr, ru, zhCn } from 'ngx-bootstrap/locale'; @@ -18,7 +19,6 @@ const locales = [ar, de, enGb, es, esDo, esUs, fr, hi, it, ja, ko, nl, nlBe, pl, locales.forEach(locale => defineLocale(locale.abbr, locale)); -getSetGlobalLocale('en'); @NgModule({ declarations: [ @@ -28,8 +28,10 @@ getSetGlobalLocale('en'); imports: [ DatepickerModule.forRoot(), BsDatepickerModule.forRoot(), + TabsModule.forRoot(), CommonModule, FormsModule, + ReactiveFormsModule, SharedModule, RouterModule.forChild(routes) ], diff --git a/demo/src/app/components/+datepicker/demos/forms/forms.component.html b/demo/src/app/components/+datepicker/demos/forms/forms.component.html index 2d63262b6e..a8cb413c01 100644 --- a/demo/src/app/components/+datepicker/demos/forms/forms.component.html +++ b/demo/src/app/components/+datepicker/demos/forms/forms.component.html @@ -1,3 +1,15 @@ - - +
+
+ +
+
+ +
+
+
+
+ 
{{datepickerModel}}
{{daterangepickerModel}}
+
+
+ diff --git a/demo/src/app/components/+datepicker/demos/index.ts b/demo/src/app/components/+datepicker/demos/index.ts index ccfe119aaa..93dc94d1aa 100644 --- a/demo/src/app/components/+datepicker/demos/index.ts +++ b/demo/src/app/components/+datepicker/demos/index.ts @@ -5,6 +5,7 @@ import { DemoDatepickerChangeLocaleComponent } from './change-locale/change-loca import { DemoDatepickerMinMaxComponent } from './min-max/min-max.component'; import { DemoDatepickerDisabledComponent } from './disabled/disabled.component'; import { DemoDatepickerFormsComponent } from './forms/forms.component'; +import { DemoDatepickerReactiveFormsComponent } from './reactive-forms/reactive-forms.component'; export const DEMO_COMPONENTS = [ DatepickerDemoComponent, @@ -13,7 +14,8 @@ export const DEMO_COMPONENTS = [ DemoDatepickerChangeLocaleComponent, DemoDatepickerMinMaxComponent, DemoDatepickerDisabledComponent, - DemoDatepickerFormsComponent + DemoDatepickerFormsComponent, + DemoDatepickerReactiveFormsComponent ]; export const DEMOS = { @@ -44,5 +46,9 @@ export const DEMOS = { forms: { component: require('!!raw-loader?lang=typescript!./forms/forms.component.ts'), html: require('!!raw-loader?lang=markup!./forms/forms.component.html') + }, + reactive: { + component: require('!!raw-loader?lang=typescript!./reactive-forms/reactive-forms.component.ts'), + html: require('!!raw-loader?lang=markup!./reactive-forms/reactive-forms.component.html') } }; diff --git a/demo/src/app/components/+datepicker/demos/reactive-forms/reactive-forms.component.html b/demo/src/app/components/+datepicker/demos/reactive-forms/reactive-forms.component.html new file mode 100644 index 0000000000..57036c2c5d --- /dev/null +++ b/demo/src/app/components/+datepicker/demos/reactive-forms/reactive-forms.component.html @@ -0,0 +1,17 @@ +
+
+
+ +
+
+ +
+
+
+
+
+ 
{{myForm.value | json}}
+
+
+ + diff --git a/demo/src/app/components/+datepicker/demos/reactive-forms/reactive-forms.component.ts b/demo/src/app/components/+datepicker/demos/reactive-forms/reactive-forms.component.ts new file mode 100644 index 0000000000..74f55d98ad --- /dev/null +++ b/demo/src/app/components/+datepicker/demos/reactive-forms/reactive-forms.component.ts @@ -0,0 +1,18 @@ +import { Component, OnInit } from '@angular/core'; +import { FormBuilder, FormGroup } from '@angular/forms'; + +@Component({ + selector: 'demo-datepicker-reactive-forms', + templateUrl: './reactive-forms.component.html' +}) +export class DemoDatepickerReactiveFormsComponent implements OnInit { + myForm: FormGroup; + constructor(private formBuilder: FormBuilder) { } + + ngOnInit() { + this.myForm = this.formBuilder.group({ + date: null, + range: null + }); + } +} diff --git a/demo/src/app/components/+datepicker/docs/title.md b/demo/src/app/components/+datepicker/docs/title.md index e974eacb1d..d7cff8f4ce 100644 --- a/demo/src/app/components/+datepicker/docs/title.md +++ b/demo/src/app/components/+datepicker/docs/title.md @@ -1,11 +1,11 @@ ```typescript // RECOMMENDED (doesn't work with system.js) -import { DatepickerModule } from 'ngx-bootstrap/datepicker'; +import { BsDatepickerModule } from 'ngx-bootstrap/datepicker'; // or -import { DatepickerModule } from 'ngx-bootstrap'; +import { BsDatepickerModule } from 'ngx-bootstrap'; @NgModule({ - imports: [DatepickerModule.forRoot(),...] + imports: [BsDatepickerModule.forRoot(),...] }) -export class AppModule(){} +export class AppModule(){} ``` diff --git a/demo/src/app/components/+datepicker/docs/titleOld.md b/demo/src/app/components/+datepicker/docs/titleOld.md new file mode 100644 index 0000000000..e974eacb1d --- /dev/null +++ b/demo/src/app/components/+datepicker/docs/titleOld.md @@ -0,0 +1,11 @@ +```typescript +// RECOMMENDED (doesn't work with system.js) +import { DatepickerModule } from 'ngx-bootstrap/datepicker'; +// or +import { DatepickerModule } from 'ngx-bootstrap'; + +@NgModule({ + imports: [DatepickerModule.forRoot(),...] +}) +export class AppModule(){} +``` diff --git a/src/datepicker/bs-datepicker-input.directive.ts b/src/datepicker/bs-datepicker-input.directive.ts index 50e02360e1..1dc55c4fb2 100644 --- a/src/datepicker/bs-datepicker-input.directive.ts +++ b/src/datepicker/bs-datepicker-input.directive.ts @@ -14,7 +14,9 @@ const BS_DATEPICKER_VALUE_ACCESSOR = { @Directive({ selector: `input[bsDatepicker]`, host: { - '(change)': 'onChange($event)' + '(change)': 'onChange($event)', + '(keyup.esc)': 'hide()', + '(blur)': 'onBlur()' }, providers: [BS_DATEPICKER_VALUE_ACCESSOR] }) @@ -43,6 +45,7 @@ export class BsDatepickerInputDirective onChange(event: any) { this.writeValue(event.target.value); + this._onTouched(); } writeValue(value: Date | string) { @@ -71,4 +74,10 @@ export class BsDatepickerInputDirective registerOnChange(fn: (value: any) => any): void { this._onChange = fn; } registerOnTouched(fn: () => any): void { this._onTouched = fn; } + + onBlur() { this._onTouched(); } + + hide() { + this._picker.hide(); + } } diff --git a/src/datepicker/bs-daterangepicker-input.directive.ts b/src/datepicker/bs-daterangepicker-input.directive.ts index 4defa9789d..941014c5e9 100644 --- a/src/datepicker/bs-daterangepicker-input.directive.ts +++ b/src/datepicker/bs-daterangepicker-input.directive.ts @@ -14,7 +14,9 @@ const BS_DATERANGEPICKER_VALUE_ACCESSOR = { @Directive({ selector: `input[bsDaterangepicker]`, host: { - '(change)': 'onChange($event)' + '(change)': 'onChange($event)', + '(keyup.esc)': 'hide()', + '(blur)': 'onBlur()' }, providers: [BS_DATERANGEPICKER_VALUE_ACCESSOR] }) @@ -45,6 +47,7 @@ export class BsDaterangepickerInputDirective onChange(event: any) { this.writeValue(event.target.value); + this._onTouched(); } writeValue(value: Date[] | string) { @@ -76,4 +79,10 @@ export class BsDaterangepickerInputDirective registerOnChange(fn: (value: any) => any): void { this._onChange = fn; } registerOnTouched(fn: () => any): void { this._onTouched = fn; } + + onBlur() { this._onTouched(); } + + hide() { + this._picker.hide(); + } }