Merge branch 'bpenkov/igx-date-range' of https://github.com/IgniteUI/…

…igniteui-angular into bpenkov/igx-date-range
IgniteUI · Apr 28, 2020 · c1d7297 · c1d7297
2 parents 6338e69 + 9ab2522
commit c1d7297
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 33 deletions.
diff --git a/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.common.ts b/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.common.ts
@@ -1,11 +1,11 @@
 export interface IgxDateTimeEditorEventArgs {
-    oldValue: Date;
-    newValue: Date;
-    userInput: string;
+    readonly oldValue?: Date;
+    newValue?: Date;
+    readonly userInput: string;
 }
 
 /**
- * An @Enum that allows you to specify a particular date, time or AmPm part.
+ * Specify a particular date, time or AmPm part.
  */
 export enum DatePart {
     Date = 'date',
@@ -18,6 +18,7 @@ export enum DatePart {
     Literal = 'literal'
 }
 
+/** @hidden @internal */
 export interface DatePartInfo {
     type: DatePart;
     start: number;

diff --git a/...s/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.spec.ts b/...s/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.spec.ts
@@ -386,7 +386,7 @@ describe('IgxDateTimeEditor', () => {
                 expect(inputElement.nativeElement.value).toEqual('33/33/33');
                 inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement });
                 fixture.detectChanges();
-                expect(inputElement.nativeElement.value).toEqual('__/__/__');
+                expect(inputElement.nativeElement.value).toEqual('');
             });
             it('should autofill missing date/time segments on blur.', () => {
                 inputElement.triggerEventHandler('focus', {});
@@ -427,46 +427,46 @@ describe('IgxDateTimeEditor', () => {
                 result = formatFullDateTime(date);
                 expect(inputElement.nativeElement.value).toEqual(result);
             });
-            it('should convert to empty mask on invalid dates input.', () => {
+            it('should not accept invalid date and time parts.', () => {
                 inputElement.triggerEventHandler('focus', {});
                 fixture.detectChanges();
                 UIInteractions.simulateTyping('63', inputElement);
                 expect(inputElement.nativeElement.value).toEqual('63/__/____ __:__:__');
                 inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement });
                 fixture.detectChanges();
-                expect(inputElement.nativeElement.value).toEqual('__/__/____ __:__:__');
+                expect(inputElement.nativeElement.value).toEqual('');
 
                 inputElement.triggerEventHandler('focus', {});
                 fixture.detectChanges();
                 UIInteractions.simulateTyping('63', inputElement, 3, 3);
                 expect(inputElement.nativeElement.value).toEqual('__/63/____ __:__:__');
                 inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement });
                 fixture.detectChanges();
-                expect(inputElement.nativeElement.value).toEqual('__/__/____ __:__:__');
+                expect(inputElement.nativeElement.value).toEqual('');
 
                 inputElement.triggerEventHandler('focus', {});
                 fixture.detectChanges();
                 UIInteractions.simulateTyping('25', inputElement, 11, 11);
                 expect(inputElement.nativeElement.value).toEqual('__/__/____ 25:__:__');
                 inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement });
                 fixture.detectChanges();
-                expect(inputElement.nativeElement.value).toEqual('__/__/____ __:__:__');
+                expect(inputElement.nativeElement.value).toEqual('');
 
                 inputElement.triggerEventHandler('focus', {});
                 fixture.detectChanges();
                 UIInteractions.simulateTyping('78', inputElement, 14, 14);
                 expect(inputElement.nativeElement.value).toEqual('__/__/____ __:78:__');
                 inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement });
                 fixture.detectChanges();
-                expect(inputElement.nativeElement.value).toEqual('__/__/____ __:__:__');
+                expect(inputElement.nativeElement.value).toEqual('');
 
                 inputElement.triggerEventHandler('focus', {});
                 fixture.detectChanges();
                 UIInteractions.simulateTyping('78', inputElement, 17, 17);
                 expect(inputElement.nativeElement.value).toEqual('__/__/____ __:__:78');
                 inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement });
                 fixture.detectChanges();
-                expect(inputElement.nativeElement.value).toEqual('__/__/____ __:__:__');
+                expect(inputElement.nativeElement.value).toEqual('');
             });
             it('should correctly show year based on century threshold.', () => {
                 inputElement.triggerEventHandler('focus', {});
@@ -521,6 +521,8 @@ describe('IgxDateTimeEditor', () => {
             it('should support different display and input formats.', () => {
                 fixture.componentInstance.displayFormat = 'longDate';
                 fixture.detectChanges();
+                inputElement.triggerEventHandler('focus', {});
+                fixture.detectChanges();
                 UIInteractions.simulateTyping('9', inputElement);
                 expect(inputElement.nativeElement.value).toEqual('9_/__/____ __:__:__');
                 inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement });
@@ -550,6 +552,8 @@ describe('IgxDateTimeEditor', () => {
             it('should support long and short date formats', () => {
                 fixture.componentInstance.displayFormat = 'longDate';
                 fixture.detectChanges();
+                inputElement.triggerEventHandler('focus', {});
+                fixture.detectChanges();
                 UIInteractions.simulateTyping('9', inputElement);
                 expect(inputElement.nativeElement.value).toEqual('9_/__/____ __:__:__');
                 inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement });
@@ -563,6 +567,8 @@ describe('IgxDateTimeEditor', () => {
 
                 fixture.componentInstance.displayFormat = 'shortDate';
                 fixture.detectChanges();
+                inputElement.triggerEventHandler('focus', {});
+                fixture.detectChanges();
                 UIInteractions.simulateTyping('9', inputElement);
                 expect(inputElement.nativeElement.value).toEqual('9_/__/____ __:__:__');
                 inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement });
@@ -575,6 +581,8 @@ describe('IgxDateTimeEditor', () => {
 
                 fixture.componentInstance.displayFormat = 'fullDate';
                 fixture.detectChanges();
+                inputElement.triggerEventHandler('focus', {});
+                fixture.detectChanges();
                 UIInteractions.simulateTyping('9', inputElement);
                 expect(inputElement.nativeElement.value).toEqual('9_/__/____ __:__:__');
                 inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement });
@@ -587,6 +595,8 @@ describe('IgxDateTimeEditor', () => {
 
                 fixture.componentInstance.displayFormat = 'shortTime';
                 fixture.detectChanges();
+                inputElement.triggerEventHandler('focus', {});
+                fixture.detectChanges();
                 UIInteractions.simulateTyping('1', inputElement, 11, 11);
                 expect(inputElement.nativeElement.value).toEqual('__/__/____ 1_:__:__');
                 inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement });
@@ -600,6 +610,8 @@ describe('IgxDateTimeEditor', () => {
 
                 fixture.componentInstance.displayFormat = 'longTime';
                 fixture.detectChanges();
+                inputElement.triggerEventHandler('focus', {});
+                fixture.detectChanges();
                 UIInteractions.simulateTyping('2', inputElement, 11, 11);
                 expect(inputElement.nativeElement.value).toEqual('__/__/____ 2_:__:__');
                 inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement });
@@ -665,7 +677,7 @@ describe('IgxDateTimeEditor', () => {
                 UIInteractions.simulatePaste(inputDate, inputElement, 0, 19);
                 inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement });
                 fixture.detectChanges();
-                expect(inputElement.nativeElement.value).toEqual('__/__/____ __:__:__');
+                expect(inputElement.nativeElement.value).toEqual('');
 
                 fixture.componentInstance.dateTimeFormat = 'd/M/yy';
                 fixture.detectChanges();
@@ -693,7 +705,7 @@ describe('IgxDateTimeEditor', () => {
                 inputDate = [date.getDate(), month, date.getFullYear()].join('/');
                 expect(inputElement.nativeElement.value).toEqual(inputDate);
             });
-            it('should revert to empty mask on clear()', fakeAsync(() => {
+            it('should clear input date on clear()', fakeAsync(() => {
                 const date = new Date(2003, 4, 5);
                 fixture.componentInstance.date = new Date(2003, 3, 5);
                 fixture.detectChanges();
@@ -702,7 +714,7 @@ describe('IgxDateTimeEditor', () => {
                 expect(inputElement.nativeElement.value).toEqual(result);
 
                 dateTimeEditorDirective.clear();
-                expect(inputElement.nativeElement.value).toEqual('__/__/____ __:__:__');
+                expect(inputElement.nativeElement.value).toEqual('');
             }));
             it('should move the caret to the start/end of the portion with CTRL + arrow left/right keys.', fakeAsync(() => {
                 const date = new Date(2003, 4, 5);
@@ -908,7 +920,7 @@ describe('IgxDateTimeEditor', () => {
                 UIInteractions.simulatePaste(inputDate, inputElement, 0, 10);
                 inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement });
                 fixture.detectChanges();
-                expect(inputElement.nativeElement.value).toEqual('__-__-____');
+                expect(inputElement.nativeElement.value).toEqual('');
                 expect(dateTimeEditorDirective.validationFailed.emit).toHaveBeenCalledTimes(1);
                 expect(dateTimeEditorDirective.validationFailed.emit).toHaveBeenCalledWith(args);
             });
@@ -941,7 +953,6 @@ describe('IgxDateTimeEditor', () => {
             it('should validate properly when used as form control.', () => {
                 spyOn(dateTimeEditorDirective.validationFailed, 'emit').and.callThrough();
                 const dateEditor = form.controls['dateEditor'];
-                // const newDate = (dateTimeEditorDirective as any).parseDate('99-99-9999').value;
                 const args = { oldValue: '', newValue: null };
                 const inputDate = '99-99-9999';
 
@@ -952,7 +963,7 @@ describe('IgxDateTimeEditor', () => {
                 inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement });
                 fixture.detectChanges();
 
-                expect(inputElement.nativeElement.value).toEqual('__-__-____');
+                expect(inputElement.nativeElement.value).toEqual('');
                 expect(form.valid).toBeFalsy();
                 expect(dateEditor.valid).toBeFalsy();
                 expect(dateTimeEditorDirective.validationFailed.emit).toHaveBeenCalledTimes(1);

diff --git a/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.ts b/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.ts
@@ -3,7 +3,7 @@ import {
   Renderer2, NgModule, Output, EventEmitter, Inject, LOCALE_ID, OnChanges, SimpleChanges
 } from '@angular/core';
 import { NG_VALUE_ACCESSOR, ControlValueAccessor, Validator, AbstractControl, ValidationErrors, NG_VALIDATORS, } from '@angular/forms';
-import { CommonModule, formatDate, DOCUMENT } from '@angular/common';
+import { formatDate, DOCUMENT } from '@angular/common';
 import { IgxMaskDirective } from '../mask/mask.directive';
 import { MaskParsingService } from '../mask/mask-parsing.service';
 import { KEYS } from '../../core/utils';
@@ -50,9 +50,11 @@ import { IgxDateTimeEditorEventArgs, DatePartInfo, DatePart } from './date-time-
 })
 export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnChanges, Validator, ControlValueAccessor {
   /**
-   * Set the locale settings used in `displayFormat`.
+   * Locale settings used for value formatting.
+   *
+   * @remarks
+   * Uses Angular's `LOCALE_ID` by default. Affects both input mask and display format if those are not set.
    *
-   * Uses Angular's `LOCALE_ID` for the default value.
    * @example
    * ```html
    * <input igxDateTimeEditor [locale]="'en'">
@@ -62,9 +64,10 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
   public locale: string;
 
   /**
-   * Set the minimum possible value the editor will allow.
+   * Minimum value required for the editor to remain valid.
    *
-   * If a `string` value is passed in, it must be in the defined input format.
+   * @remarks
+   * If a `string` value is passed, it must be in the defined input format.
    *
    * @example
    * ```html
@@ -82,9 +85,11 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
   }
 
   /**
-   * Set the maximum possible value the editor will allow.
+   * Maximum value required for the editor to remain valid.
    *
+   * @remarks
    * If a `string` value is passed in, it must be in the defined input format.
+   *
    * @example
    * ```html
    * <input igxDateTimeEditor [maxValue]="maxDate">
@@ -122,7 +127,7 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
   public displayFormat: string;
 
   /**
-   * get/set the expected user input format (and placeholder).
+   * Expected user input format (and placeholder).
    * @example
    * ```html
    * <input [igxDateTimeEditor]="'dd/MM/yyyy'">
@@ -142,7 +147,7 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
   }
 
   /**
-   * get/set the editor's value.
+   * Editor value.
    * @example
    * ```html
    * <input igxDateTimeEditor [value]="date">
@@ -324,11 +329,13 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
   }
 
   /** @hidden @internal */
-  public onBlur(event): void {
+  public onBlur(value: string): void {
     this._isFocused = false;
 
     if (this.inputValue === this.emptyMask) {
-      this.updateValue(null);
+      if (this.value) {
+        this.updateValue(null);
+      }
       this.inputValue = '';
       return;
     }
@@ -348,14 +355,13 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
     }
 
     this.updateMask();
-    this.onTouchCallback();
-    super.onBlur(event);
+    super.onBlur(value);
   }
 
   /** @hidden @internal */
   public updateMask(): void {
     if (!this.value || !this.isValidDate(this.value)) {
-      this.inputValue = this.emptyMask;
+      this.inputValue = this._isFocused ? this.emptyMask : '';
       return;
     }
     if (this._isFocused) {
@@ -573,7 +579,6 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
 
 @NgModule({
   declarations: [IgxDateTimeEditorDirective],
-  exports: [IgxDateTimeEditorDirective],
-  imports: [CommonModule]
+  exports: [IgxDateTimeEditorDirective]
 })
 export class IgxDateTimeEditorModule { }
diff --git a/projects/igniteui-angular/src/lib/directives/date-time-editor/index.ts b/projects/igniteui-angular/src/lib/directives/date-time-editor/index.ts
@@ -1,2 +1,2 @@
-export * from './date-time-editor.common';
+export { DatePart, IgxDateTimeEditorEventArgs } from './date-time-editor.common';
 export * from './date-time-editor.directive';