fix datetimepicker form bugs, add form example (#978)

SAP · Jun 26, 2019 · 966723f · 966723f
1 parent 31addcd
commit 966723f
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 0 deletions.
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
@@ -49,3 +49,11 @@ <h2>Formatting</h2>
 </component-example>
 <code-example [code]="datetimeFormatHtml" [language]="'HTML'"></code-example>
 <code-example [code]="datetimeFormatTs" [language]="'typescript'"></code-example>
+
+<separator></separator>
+<h2>Use in a form</h2>
+<component-example [name]="'ex5'">
+    <fd-datetime-form-example></fd-datetime-form-example>
+</component-example>
+<code-example [code]="datetimeFormHtml" [language]="'HTML'"></code-example>
+<code-example [code]="datetimeFormTs" [language]="'typescript'"></code-example>
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
@@ -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/datetime-picker/examples/datetime-form-example/datetime-form-example.component.html b/...-docs/datetime-picker/examples/datetime-form-example/datetime-form-example.component.html
@@ -0,0 +1,8 @@
+<form [formGroup]="customForm">
+    <fd-datetime-picker formControlName="date"></fd-datetime-picker>
+</form>
+
+Touched: {{customForm.controls.date.touched}}<br/>
+Dirty: {{customForm.controls.date.dirty}}<br/>
+
+Selected Date: {{ customForm.controls.date.value ? customForm.controls.date.value.toDateString() : 'null' }}
diff --git a/...nt-docs/datetime-picker/examples/datetime-form-example/datetime-form-example.component.ts b/...nt-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
@@ -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
@@ -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) {