diff --git a/docs/app/documentation/component-docs/datetime-picker/datetime-picker-docs.component.html b/docs/app/documentation/component-docs/datetime-picker/datetime-picker-docs.component.html index f2f8f14781d..d8251c2605a 100644 --- a/docs/app/documentation/component-docs/datetime-picker/datetime-picker-docs.component.html +++ b/docs/app/documentation/component-docs/datetime-picker/datetime-picker-docs.component.html @@ -49,3 +49,11 @@

Formatting

+ + +

Use in a form

+ + + + + diff --git a/docs/app/documentation/component-docs/datetime-picker/datetime-picker-docs.component.ts b/docs/app/documentation/component-docs/datetime-picker/datetime-picker-docs.component.ts index 3b4723c95a3..b60cc3359a1 100644 --- a/docs/app/documentation/component-docs/datetime-picker/datetime-picker-docs.component.ts +++ b/docs/app/documentation/component-docs/datetime-picker/datetime-picker-docs.component.ts @@ -14,6 +14,9 @@ import * as dateTimePickerAllowNullTs from '!raw-loader!./examples/datetime-allo import * as dateTimeFormatHtml from '!raw-loader!./examples/datetime-format-example/datetime-format-example.component.html'; import * as dateTimeFormatTs from '!raw-loader!./examples/datetime-format-example/datetime-format-example.component.ts'; +import * as dateTimeFormHtml from '!raw-loader!./examples/datetime-form-example/datetime-form-example.component.html'; +import * as dateTimeFormTs from '!raw-loader!./examples/datetime-form-example/datetime-form-example.component.ts'; + @Component({ selector: 'app-datetime-picker-docs', @@ -34,6 +37,9 @@ export class DatetimePickerDocsComponent { datetimeFormatHtml = dateTimeFormatHtml; datetimeFormatTs = dateTimeFormatTs; + datetimeFormHtml = dateTimeFormHtml; + datetimeFormTs = dateTimeFormTs; + datetimePickerAllowNullTs = dateTimePickerAllowNullTs; } diff --git a/docs/app/documentation/component-docs/datetime-picker/examples/datetime-form-example/datetime-form-example.component.html b/docs/app/documentation/component-docs/datetime-picker/examples/datetime-form-example/datetime-form-example.component.html new file mode 100644 index 00000000000..5e9d0b96637 --- /dev/null +++ b/docs/app/documentation/component-docs/datetime-picker/examples/datetime-form-example/datetime-form-example.component.html @@ -0,0 +1,8 @@ +
+ +
+ +Touched: {{customForm.controls.date.touched}}
+Dirty: {{customForm.controls.date.dirty}}
+ +Selected Date: {{ customForm.controls.date.value ? customForm.controls.date.value.toDateString() : 'null' }} diff --git a/docs/app/documentation/component-docs/datetime-picker/examples/datetime-form-example/datetime-form-example.component.ts b/docs/app/documentation/component-docs/datetime-picker/examples/datetime-form-example/datetime-form-example.component.ts new file mode 100644 index 00000000000..828564a0a85 --- /dev/null +++ b/docs/app/documentation/component-docs/datetime-picker/examples/datetime-form-example/datetime-form-example.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; +import { FormControl, FormGroup } from '@angular/forms'; + +@Component({ + selector: 'fd-datetime-form-example', + templateUrl: './datetime-form-example.component.html' +}) +export class DatetimeFormExampleComponent { + customForm = new FormGroup({ + date: new FormControl(new Date()) + }); +} diff --git a/docs/app/documentation/documentation.module.ts b/docs/app/documentation/documentation.module.ts index d7d233f10e4..b8c90cf2d44 100644 --- a/docs/app/documentation/documentation.module.ts +++ b/docs/app/documentation/documentation.module.ts @@ -324,6 +324,7 @@ import { DatePickerPositionExampleComponent } from './component-docs/date-picker import { TimePickerOtherDelimiterExampleComponent } from './component-docs/time-picker/examples/time-picker-other-delimiter-example.component'; import { DatetimeFormatExampleComponent } from './component-docs/datetime-picker/examples/datetime-format-example/datetime-format-example.component'; import { HighlightModule } from 'ngx-highlightjs'; +import { DatetimeFormExampleComponent } from './component-docs/datetime-picker/examples/datetime-form-example/datetime-form-example.component'; @NgModule({ declarations: [ @@ -410,6 +411,7 @@ import { HighlightModule } from 'ngx-highlightjs'; DatetimeNonMeridianExampleComponent, DatetimeProgramExampleComponent, DatetimeFormatExampleComponent, + DatetimeFormExampleComponent, DatetimePickerAllowNullExampleComponent, DropdownContextualMenuExampleComponent, DropdownDefaultExampleComponent, diff --git a/library/src/lib/datetime-picker/datetime-picker.component.ts b/library/src/lib/datetime-picker/datetime-picker.component.ts index e31c058d63e..3cb5ea438ca 100644 --- a/library/src/lib/datetime-picker/datetime-picker.component.ts +++ b/library/src/lib/datetime-picker/datetime-picker.component.ts @@ -177,6 +177,7 @@ export class DatetimePickerComponent implements OnInit, OnDestroy, ControlValueA /** Toggles the popover. */ togglePopover(): void { + this.onTouched(this.selectedDay.date); if (this.isOpen) { this.closePopover(); } else { @@ -186,6 +187,7 @@ export class DatetimePickerComponent implements OnInit, OnDestroy, ControlValueA /** Opens the popover. */ openPopover(inputFieldDate?: string): void { + this.onTouched(this.selectedDay.date); if (!this.isOpen) { this.isOpen = true; if (inputFieldDate !== null && inputFieldDate !== '' && !this.isInvalidDateInput) {