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
index 8b3dade6702..77b0d435775 100644
--- 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/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.spec.ts
index eb273e93433..f07089fe285 100644
--- a/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.spec.ts
+++ b/projects/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,14 +427,14 @@ 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();
@@ -442,7 +442,7 @@ describe('IgxDateTimeEditor', () => {
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();
@@ -450,7 +450,7 @@ describe('IgxDateTimeEditor', () => {
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();
@@ -458,7 +458,7 @@ describe('IgxDateTimeEditor', () => {
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();
@@ -466,7 +466,7 @@ describe('IgxDateTimeEditor', () => {
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
index f0c4504a81f..cbfd3647087 100644
--- 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
*
@@ -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
*
@@ -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
*
@@ -142,7 +147,7 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
}
/**
- * get/set the editor's value.
+ * Editor value.
* @example
* ```html
*
@@ -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
index 4a06b380806..2ce5075a89d 100644
--- 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';