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) {