fix: datepicker touched/dirty bugs (#968)

* fix datepicker touched/dirty bugs * demonstrate form use with range of dates * remove extra margin * fix conflict
SAP · Jun 26, 2019 · bf69937 · bf69937
1 parent 287b43e
commit bf69937
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 9 deletions.
diff --git a/docs/app/documentation/component-docs/date-picker/date-picker-docs.component.html b/docs/app/documentation/component-docs/date-picker/date-picker-docs.component.html
@@ -57,10 +57,17 @@ <h2>Date Picker in Form</h2>
 </component-example>
 <code-example [code]="datePickerFormTs" [language]="'typescript'"></code-example>
 
+<separator></separator>
+<h2>Date Picker in Form with a range of dates</h2>
+<component-example [name]="'ex7'">
+  <fd-date-picker-form-range-example></fd-date-picker-form-range-example>
+</component-example>
+<code-example [code]="datePickerRangeFormTs" [language]="'typescript'"></code-example>
+
 <separator></separator>
 <h2>Position</h2>
 <description>There is also added <code>[position]</code> attribute which allows us to decide where popup should be shown.</description>
-<component-example name="'ex7'">
+<component-example name="'ex8'">
     <fd-date-picker-position-example></fd-date-picker-position-example>
 </component-example>
 <code-example [code]="datePickerPositionTs" [language]="'typescript'"></code-example>

diff --git a/docs/app/documentation/component-docs/date-picker/date-picker-docs.component.ts b/docs/app/documentation/component-docs/date-picker/date-picker-docs.component.ts
@@ -6,6 +6,7 @@ import * as datePickeri18nSrc from '!raw-loader!./examples/date-picker-i18n-exam
 import * as datePickerFormatSrc from '!raw-loader!./examples/date-picker-format-example.component.ts';
 import * as datePickerAllowNullSrc from '!raw-loader!./examples/date-picker-allow-null-example.component.ts';
 import * as datePickerFormTsSrc from '!raw-loader!./examples/date-picker-form-example.component.ts';
+import * as datePickerRangeFormTsSrc from '!raw-loader!./examples/date-picker-form-range-example.component.ts';
 import * as datePickerPositionSrc from '!raw-loader!./examples/date-picker-position-example.component.ts';
 
 @Component({
@@ -20,5 +21,7 @@ export class DatePickerDocsComponent {
     datePickerFormatTs = datePickerFormatSrc;
     datePickerAllowNullTs = datePickerAllowNullSrc;
     datePickerFormTs = datePickerFormTsSrc;
+    datePickerRangeFormTs = datePickerRangeFormTsSrc;
     datePickerPositionTs = datePickerPositionSrc;
+
 }
diff --git a/...p/documentation/component-docs/date-picker/examples/date-picker-form-example.component.ts b/...p/documentation/component-docs/date-picker/examples/date-picker-form-example.component.ts
@@ -7,6 +7,9 @@ import { FormGroup, FormControl } from '@angular/forms';
         <form [formGroup]="customForm">
             <fd-date-picker formControlName="date"></fd-date-picker>
         </form>
+        
+        Touched: {{customForm.controls.date.touched}}<br/>
+        Dirty: {{customForm.controls.date.dirty}}<br/>
 
         Selected Date: {{ customForm.controls.date.value.date ? customForm.controls.date.value.date.toDateString() : 'null' }}
     `

diff --git a/...mentation/component-docs/date-picker/examples/date-picker-form-range-example.component.ts b/...mentation/component-docs/date-picker/examples/date-picker-form-range-example.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { FormGroup, FormControl } from '@angular/forms';
+
+@Component({
+    selector: 'fd-date-picker-form-range-example',
+    template: `
+        <form [formGroup]="customForm">
+            <fd-date-picker type="range" formControlName="dates"></fd-date-picker>
+        </form>
+        
+        Touched: {{customForm.controls.dates.touched}}<br/>
+        Dirty: {{customForm.controls.dates.dirty}}<br/>
+
+        Range Start Date: {{ customForm.controls.dates.value.date ? customForm.controls.dates.value.date.toDateString() : 'null' }}<br/>
+        Range End Date: {{ customForm.controls.dates.value.rangeEnd ? customForm.controls.dates.value.rangeEnd.toDateString() : 'null' }}
+    `
+})
+export class DatePickerFormRangeExampleComponent {
+
+    today: Date = new Date();
+
+    customForm = new FormGroup({
+        dates: new FormControl({ date: this.today, rangeEnd: new Date(this.today.getTime() + 432000000) })
+    });
+};
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 { DatePickerFormRangeExampleComponent } from './component-docs/date-picker/examples/date-picker-form-range-example.component';
 import { DatetimeFormExampleComponent } from './component-docs/datetime-picker/examples/datetime-form-example/datetime-form-example.component';
 
 @NgModule({
@@ -407,6 +408,7 @@ import { DatetimeFormExampleComponent } from './component-docs/datetime-picker/e
         DatePickerSingleExampleComponent,
         DatePickerAllowNullExampleComponent,
         DatePickerFormExampleComponent,
+        DatePickerFormRangeExampleComponent,
         DatetimeExampleComponent,
         DatetimeNonMeridianExampleComponent,
         DatetimeProgramExampleComponent,

diff --git a/library/src/lib/badge-label/badge.directive.ts b/library/src/lib/badge-label/badge.directive.ts
@@ -6,6 +6,7 @@ import { AbstractFdNgxClass } from '../utils/abstract-fd-ngx-class';
  * Colors, generally in combination with text, are used to easily highlight the state of an object.
  */
 @Directive({
+    // tslint:disable-next-line:directive-selector
     selector: '[fd-badge]'
 })
 export class BadgeDirective extends AbstractFdNgxClass {

diff --git a/library/src/lib/badge-label/label.directive.ts b/library/src/lib/badge-label/label.directive.ts
@@ -6,6 +6,7 @@ import { AbstractFdNgxClass } from '../utils/abstract-fd-ngx-class';
  * Colors, generally in combination with text, are used to easily highlight the state of an object.
  */
 @Directive({
+    // tslint:disable-next-line:directive-selector
     selector: '[fd-label]'
 })
 export class LabelDirective extends AbstractFdNgxClass {

diff --git a/library/src/lib/date-picker/date-picker.component.scss b/library/src/lib/date-picker/date-picker.component.scss
@@ -4,10 +4,4 @@
     fd-popover {
         display: block;
     }
-
-    // Added to fix popper migration style bugs. Temporary fix.
-    // PR is tracked here https://github.com/SAP/fundamental-styles/pull/9.
-    fd-calendar {
-        margin: 0 12px;
-    }
 }
diff --git a/library/src/lib/date-picker/date-picker.component.ts b/library/src/lib/date-picker/date-picker.component.ts
@@ -167,12 +167,14 @@ export class DatePickerComponent implements OnInit, OnDestroy, ControlValueAcces
 
     /** Opens the calendar */
     openCalendar(e) {
+        this.onTouched({date: this.selectedDay.date});
         this.isOpen = true;
         this.getInputValue(e);
     }
 
     /** Toggles the calendar open or closed */
     toggleCalendar(e) {
+        this.onTouched({date: this.selectedDay.date});
         this.isOpen = !this.isOpen;
         this.getInputValue(e);
     }
@@ -247,13 +249,11 @@ export class DatePickerComponent implements OnInit, OnDestroy, ControlValueAcces
                     if (this.type === 'single') {
                         this.selectedDay.date = null;
                         this.selectedDay.selected = null;
-                        this.onChange({date: this.selectedDay.date});
                     } else {
                         this.selectedRangeFirst.date = null;
                         this.selectedRangeFirst.selected = null;
                         this.selectedRangeLast.date = null;
                         this.selectedRangeLast.selected = null;
-                        this.onChange({date: this.selectedRangeFirst.date, rangeEnd: this.selectedRangeLast.date});
                     }
                 } else {
                     this.isInvalidDateInput = true;