Skip to content

Commit 1c7f8b5

Browse files
LipataLipata
authored
Merge pull request #7208 from IgniteUI/dpetev/date-time-editor-misc
Date time editor misc updates
2 parents c797ee3 + f711713 commit 1c7f8b5

File tree

4 files changed

+50
-33
lines changed

4 files changed

+50
-33
lines changed

‎projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.common.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
export interface IgxDateTimeEditorEventArgs {
2-
oldValue: Date;
3-
newValue: Date;
4-
userInput: string;
2+
readonly oldValue?: Date;
3+
newValue?: Date;
4+
readonly userInput: string;
55
}
66

77
/**
8-
* An @Enum that allows you to specify a particular date, time or AmPm part.
8+
* Specify a particular date, time or AmPm part.
99
*/
1010
export enum DatePart {
1111
Date = 'date',
@@ -18,6 +18,7 @@ export enum DatePart {
1818
Literal = 'literal'
1919
}
2020

21+
/** @hidden @internal */
2122
export interface DatePartInfo {
2223
type: DatePart;
2324
start: number;

‎projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.spec.ts‎

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -386,7 +386,7 @@ describe('IgxDateTimeEditor', () => {
386386
expect(inputElement.nativeElement.value).toEqual('33/33/33');
387387
inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement });
388388
fixture.detectChanges();
389-
expect(inputElement.nativeElement.value).toEqual('__/__/__');
389+
expect(inputElement.nativeElement.value).toEqual('');
390390
});
391391
it('should autofill missing date/time segments on blur.', () => {
392392
inputElement.triggerEventHandler('focus', {});
@@ -427,46 +427,46 @@ describe('IgxDateTimeEditor', () => {
427427
result = formatFullDateTime(date);
428428
expect(inputElement.nativeElement.value).toEqual(result);
429429
});
430-
it('should convert to empty mask on invalid dates input.', () => {
430+
it('should not accept invalid date and time parts.', () => {
431431
inputElement.triggerEventHandler('focus', {});
432432
fixture.detectChanges();
433433
UIInteractions.simulateTyping('63', inputElement);
434434
expect(inputElement.nativeElement.value).toEqual('63/__/____ __:__:__');
435435
inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement });
436436
fixture.detectChanges();
437-
expect(inputElement.nativeElement.value).toEqual('__/__/____ __:__:__');
437+
expect(inputElement.nativeElement.value).toEqual('');
438438

439439
inputElement.triggerEventHandler('focus', {});
440440
fixture.detectChanges();
441441
UIInteractions.simulateTyping('63', inputElement, 3, 3);
442442
expect(inputElement.nativeElement.value).toEqual('__/63/____ __:__:__');
443443
inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement });
444444
fixture.detectChanges();
445-
expect(inputElement.nativeElement.value).toEqual('__/__/____ __:__:__');
445+
expect(inputElement.nativeElement.value).toEqual('');
446446

447447
inputElement.triggerEventHandler('focus', {});
448448
fixture.detectChanges();
449449
UIInteractions.simulateTyping('25', inputElement, 11, 11);
450450
expect(inputElement.nativeElement.value).toEqual('__/__/____ 25:__:__');
451451
inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement });
452452
fixture.detectChanges();
453-
expect(inputElement.nativeElement.value).toEqual('__/__/____ __:__:__');
453+
expect(inputElement.nativeElement.value).toEqual('');
454454

455455
inputElement.triggerEventHandler('focus', {});
456456
fixture.detectChanges();
457457
UIInteractions.simulateTyping('78', inputElement, 14, 14);
458458
expect(inputElement.nativeElement.value).toEqual('__/__/____ __:78:__');
459459
inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement });
460460
fixture.detectChanges();
461-
expect(inputElement.nativeElement.value).toEqual('__/__/____ __:__:__');
461+
expect(inputElement.nativeElement.value).toEqual('');
462462

463463
inputElement.triggerEventHandler('focus', {});
464464
fixture.detectChanges();
465465
UIInteractions.simulateTyping('78', inputElement, 17, 17);
466466
expect(inputElement.nativeElement.value).toEqual('__/__/____ __:__:78');
467467
inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement });
468468
fixture.detectChanges();
469-
expect(inputElement.nativeElement.value).toEqual('__/__/____ __:__:__');
469+
expect(inputElement.nativeElement.value).toEqual('');
470470
});
471471
it('should correctly show year based on century threshold.', () => {
472472
inputElement.triggerEventHandler('focus', {});
@@ -521,6 +521,8 @@ describe('IgxDateTimeEditor', () => {
521521
it('should support different display and input formats.', () => {
522522
fixture.componentInstance.displayFormat = 'longDate';
523523
fixture.detectChanges();
524+
inputElement.triggerEventHandler('focus', {});
525+
fixture.detectChanges();
524526
UIInteractions.simulateTyping('9', inputElement);
525527
expect(inputElement.nativeElement.value).toEqual('9_/__/____ __:__:__');
526528
inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement });
@@ -550,6 +552,8 @@ describe('IgxDateTimeEditor', () => {
550552
it('should support long and short date formats', () => {
551553
fixture.componentInstance.displayFormat = 'longDate';
552554
fixture.detectChanges();
555+
inputElement.triggerEventHandler('focus', {});
556+
fixture.detectChanges();
553557
UIInteractions.simulateTyping('9', inputElement);
554558
expect(inputElement.nativeElement.value).toEqual('9_/__/____ __:__:__');
555559
inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement });
@@ -563,6 +567,8 @@ describe('IgxDateTimeEditor', () => {
563567

564568
fixture.componentInstance.displayFormat = 'shortDate';
565569
fixture.detectChanges();
570+
inputElement.triggerEventHandler('focus', {});
571+
fixture.detectChanges();
566572
UIInteractions.simulateTyping('9', inputElement);
567573
expect(inputElement.nativeElement.value).toEqual('9_/__/____ __:__:__');
568574
inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement });
@@ -575,6 +581,8 @@ describe('IgxDateTimeEditor', () => {
575581

576582
fixture.componentInstance.displayFormat = 'fullDate';
577583
fixture.detectChanges();
584+
inputElement.triggerEventHandler('focus', {});
585+
fixture.detectChanges();
578586
UIInteractions.simulateTyping('9', inputElement);
579587
expect(inputElement.nativeElement.value).toEqual('9_/__/____ __:__:__');
580588
inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement });
@@ -587,6 +595,8 @@ describe('IgxDateTimeEditor', () => {
587595

588596
fixture.componentInstance.displayFormat = 'shortTime';
589597
fixture.detectChanges();
598+
inputElement.triggerEventHandler('focus', {});
599+
fixture.detectChanges();
590600
UIInteractions.simulateTyping('1', inputElement, 11, 11);
591601
expect(inputElement.nativeElement.value).toEqual('__/__/____ 1_:__:__');
592602
inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement });
@@ -600,6 +610,8 @@ describe('IgxDateTimeEditor', () => {
600610

601611
fixture.componentInstance.displayFormat = 'longTime';
602612
fixture.detectChanges();
613+
inputElement.triggerEventHandler('focus', {});
614+
fixture.detectChanges();
603615
UIInteractions.simulateTyping('2', inputElement, 11, 11);
604616
expect(inputElement.nativeElement.value).toEqual('__/__/____ 2_:__:__');
605617
inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement });
@@ -665,7 +677,7 @@ describe('IgxDateTimeEditor', () => {
665677
UIInteractions.simulatePaste(inputDate, inputElement, 0, 19);
666678
inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement });
667679
fixture.detectChanges();
668-
expect(inputElement.nativeElement.value).toEqual('__/__/____ __:__:__');
680+
expect(inputElement.nativeElement.value).toEqual('');
669681

670682
fixture.componentInstance.dateTimeFormat = 'd/M/yy';
671683
fixture.detectChanges();
@@ -693,7 +705,7 @@ describe('IgxDateTimeEditor', () => {
693705
inputDate = [date.getDate(), month, date.getFullYear()].join('/');
694706
expect(inputElement.nativeElement.value).toEqual(inputDate);
695707
});
696-
it('should revert to empty mask on clear()', fakeAsync(() => {
708+
it('should clear input date on clear()', fakeAsync(() => {
697709
const date = new Date(2003, 4, 5);
698710
fixture.componentInstance.date = new Date(2003, 3, 5);
699711
fixture.detectChanges();
@@ -702,7 +714,7 @@ describe('IgxDateTimeEditor', () => {
702714
expect(inputElement.nativeElement.value).toEqual(result);
703715

704716
dateTimeEditorDirective.clear();
705-
expect(inputElement.nativeElement.value).toEqual('__/__/____ __:__:__');
717+
expect(inputElement.nativeElement.value).toEqual('');
706718
}));
707719
it('should move the caret to the start/end of the portion with CTRL + arrow left/right keys.', fakeAsync(() => {
708720
const date = new Date(2003, 4, 5);
@@ -908,7 +920,7 @@ describe('IgxDateTimeEditor', () => {
908920
UIInteractions.simulatePaste(inputDate, inputElement, 0, 10);
909921
inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement });
910922
fixture.detectChanges();
911-
expect(inputElement.nativeElement.value).toEqual('__-__-____');
923+
expect(inputElement.nativeElement.value).toEqual('');
912924
expect(dateTimeEditorDirective.validationFailed.emit).toHaveBeenCalledTimes(1);
913925
expect(dateTimeEditorDirective.validationFailed.emit).toHaveBeenCalledWith(args);
914926
});
@@ -941,7 +953,6 @@ describe('IgxDateTimeEditor', () => {
941953
it('should validate properly when used as form control.', () => {
942954
spyOn(dateTimeEditorDirective.validationFailed, 'emit').and.callThrough();
943955
const dateEditor = form.controls['dateEditor'];
944-
// const newDate = (dateTimeEditorDirective as any).parseDate('99-99-9999').value;
945956
const args = { oldValue: '', newValue: null };
946957
const inputDate = '99-99-9999';
947958

@@ -952,7 +963,7 @@ describe('IgxDateTimeEditor', () => {
952963
inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement });
953964
fixture.detectChanges();
954965

955-
expect(inputElement.nativeElement.value).toEqual('__-__-____');
966+
expect(inputElement.nativeElement.value).toEqual('');
956967
expect(form.valid).toBeFalsy();
957968
expect(dateEditor.valid).toBeFalsy();
958969
expect(dateTimeEditorDirective.validationFailed.emit).toHaveBeenCalledTimes(1);

‎projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.ts‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {
33
Renderer2, NgModule, Output, EventEmitter, Inject, LOCALE_ID, OnChanges, SimpleChanges
44
} from '@angular/core';
55
import { NG_VALUE_ACCESSOR, ControlValueAccessor, Validator, AbstractControl, ValidationErrors, NG_VALIDATORS, } from '@angular/forms';
6-
import { CommonModule, formatDate, DOCUMENT } from '@angular/common';
6+
import { formatDate, DOCUMENT } from '@angular/common';
77
import { IgxMaskDirective } from '../mask/mask.directive';
88
import { MaskParsingService } from '../mask/mask-parsing.service';
99
import { KEYS } from '../../core/utils';
@@ -50,9 +50,11 @@ import { IgxDateTimeEditorEventArgs, DatePartInfo, DatePart } from './date-time-
5050
})
5151
export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnChanges, Validator, ControlValueAccessor {
5252
/**
53-
* Set the locale settings used in `displayFormat`.
53+
* Locale settings used for value formatting.
54+
*
55+
* @remarks
56+
* Uses Angular's `LOCALE_ID` by default. Affects both input mask and display format if those are not set.
5457
*
55-
* Uses Angular's `LOCALE_ID` for the default value.
5658
* @example
5759
* ```html
5860
* <input igxDateTimeEditor [locale]="'en'">
@@ -62,9 +64,10 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
6264
public locale: string;
6365

6466
/**
65-
* Set the minimum possible value the editor will allow.
67+
* Minimum value required for the editor to remain valid.
6668
*
67-
* If a `string` value is passed in, it must be in the defined input format.
69+
* @remarks
70+
* If a `string` value is passed, it must be in the defined input format.
6871
*
6972
* @example
7073
* ```html
@@ -82,9 +85,11 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
8285
}
8386

8487
/**
85-
* Set the maximum possible value the editor will allow.
88+
* Maximum value required for the editor to remain valid.
8689
*
90+
* @remarks
8791
* If a `string` value is passed in, it must be in the defined input format.
92+
*
8893
* @example
8994
* ```html
9095
* <input igxDateTimeEditor [maxValue]="maxDate">
@@ -122,7 +127,7 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
122127
public displayFormat: string;
123128

124129
/**
125-
* get/set the expected user input format (and placeholder).
130+
* Expected user input format (and placeholder).
126131
* @example
127132
* ```html
128133
* <input [igxDateTimeEditor]="'dd/MM/yyyy'">
@@ -142,7 +147,7 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
142147
}
143148

144149
/**
145-
* get/set the editor's value.
150+
* Editor value.
146151
* @example
147152
* ```html
148153
* <input igxDateTimeEditor [value]="date">
@@ -324,11 +329,13 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
324329
}
325330

326331
/** @hidden @internal */
327-
public onBlur(event): void {
332+
public onBlur(value: string): void {
328333
this._isFocused = false;
329334

330335
if (this.inputValue === this.emptyMask) {
331-
this.updateValue(null);
336+
if (this.value) {
337+
this.updateValue(null);
338+
}
332339
this.inputValue = '';
333340
return;
334341
}
@@ -348,14 +355,13 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
348355
}
349356

350357
this.updateMask();
351-
this.onTouchCallback();
352-
super.onBlur(event);
358+
super.onBlur(value);
353359
}
354360

355361
/** @hidden @internal */
356362
public updateMask(): void {
357363
if (!this.value || !this.isValidDate(this.value)) {
358-
this.inputValue = this.emptyMask;
364+
this.inputValue = this._isFocused ? this.emptyMask : '';
359365
return;
360366
}
361367
if (this._isFocused) {
@@ -573,7 +579,6 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
573579

574580
@NgModule({
575581
declarations: [IgxDateTimeEditorDirective],
576-
exports: [IgxDateTimeEditorDirective],
577-
imports: [CommonModule]
582+
exports: [IgxDateTimeEditorDirective]
578583
})
579584
export class IgxDateTimeEditorModule { }

‎projects/igniteui-angular/src/lib/directives/date-time-editor/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
export * from './date-time-editor.common';
1+
export { DatePart, IgxDateTimeEditorEventArgs } from './date-time-editor.common';
22
export * from './date-time-editor.directive';

0 commit comments

Comments
 (0)