diff --git a/projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts b/projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts index e32b343d088..79e32a8b1c1 100644 --- a/projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts +++ b/projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts @@ -13,7 +13,7 @@ import { IToggleView } from '../core/navigation'; import { IBaseCancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils'; import { IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive'; import { OverlaySettings } from '../services/overlay/utilities'; -import { IgxPickerToggleComponent } from './picker-icons.common'; +import { IgxPickerClearComponent, IgxPickerToggleComponent } from './picker-icons.common'; import { PickerInteractionMode } from './types'; import { WEEKDAYS } from '../calendar/calendar'; import { DateRange } from '../date-range-picker/date-range-picker-inputs.common'; @@ -239,6 +239,10 @@ export abstract class PickerBaseDirective implements IToggleView, EditorProvider @ContentChildren(IgxPickerToggleComponent, { descendants: true }) public toggleComponents: QueryList; + /** @hidden @internal */ + @ContentChildren(IgxPickerClearComponent, { descendants: true }) + public clearComponents: QueryList; + @ContentChildren(IgxPrefixDirective, { descendants: true }) protected prefixes: QueryList; @@ -299,9 +303,8 @@ export abstract class PickerBaseDirective implements IToggleView, EditorProvider /** @hidden @internal */ public ngAfterViewInit(): void { - this.subToIconsClicked(this.toggleComponents, () => this.open()); - this.toggleComponents.changes.pipe(takeUntil(this._destroy$)) - .subscribe(() => this.subToIconsClicked(this.toggleComponents, () => this.open())); + this.subToIconsClicked(this.toggleComponents, () => this.toggle()); + this.subToIconsClicked(this.clearComponents, () => this.clear()); } /** @hidden @internal */ @@ -322,17 +325,28 @@ export abstract class PickerBaseDirective implements IToggleView, EditorProvider } /** Subscribes to the click events of toggle/clear icons in a query */ - protected subToIconsClicked(components: QueryList, next: () => any): void { - components.forEach(toggle => { - toggle.clicked - .pipe(takeUntil(merge(components.changes, this._destroy$))) - .subscribe(next); - }); + private subToIconsClicked( + components: QueryList, + handler: () => void + ): void { + const subscribeToClick = componentList => { + componentList.forEach(component => { + component.clicked + .pipe(takeUntil(merge(componentList.changes, this._destroy$))) + .subscribe(handler); + }); + }; + + subscribeToClick(components); + + components.changes.pipe(takeUntil(this._destroy$)) + .subscribe(() => subscribeToClick(components)); } public abstract select(value: Date | DateRange | string): void; public abstract open(settings?: OverlaySettings): void; public abstract toggle(settings?: OverlaySettings): void; public abstract close(): void; + public abstract clear(): void; public abstract getEditElement(): HTMLInputElement; } diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts index a3a6935af7d..3840b18c426 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts @@ -5,7 +5,6 @@ import { ChangeDetectorRef, Component, ContentChild, - ContentChildren, ElementRef, EventEmitter, HostBinding, @@ -19,7 +18,6 @@ import { Optional, Output, PipeTransform, - QueryList, Renderer2, ViewChild, ViewContainerRef, @@ -50,7 +48,7 @@ import { DatePickerResourceStringsEN, IDatePickerResourceStrings } from '../core import { IBaseCancelableBrowserEventArgs, isDate, PlatformUtil } from '../core/utils'; import { IgxCalendarContainerComponent } from '../date-common/calendar-container/calendar-container.component'; import { PickerBaseDirective } from '../date-common/picker-base.directive'; -import { IgxPickerActionsDirective, IgxPickerClearComponent } from '../date-common/public_api'; +import { IgxPickerActionsDirective } from '../date-common/public_api'; import { PickerHeaderOrientation } from '../date-common/types'; import { DateTimeUtil } from '../date-common/util/date-time.util'; import { DatePart, DatePartDeltas, IgxDateTimeEditorDirective } from '../directives/date-time-editor/public_api'; @@ -400,10 +398,6 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr @Output() public validationFailed = new EventEmitter(); - /** @hidden @internal */ - @ContentChildren(IgxPickerClearComponent) - public clearComponents: QueryList; - /** @hidden @internal */ @ContentChild(IgxLabelDirective) public label: IgxLabelDirective; @@ -770,10 +764,6 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr this.subscribeToOverlayEvents(); this.subscribeToDateEditorEvents(); - this.subToIconsClicked(this.clearComponents, () => this.clear()); - this.clearComponents.changes.pipe(takeUntil(this._destroy$)) - .subscribe(() => this.subToIconsClicked(this.clearComponents, () => this.clear())); - this._dropDownOverlaySettings.excludeFromOutsideClick = [this.inputGroup.element.nativeElement]; fromEvent(this.inputDirective.nativeElement, 'blur') diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.html b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.html index 6ea322900a2..4460efeebfe 100644 --- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.html +++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.html @@ -19,21 +19,31 @@ + + + + {{ dateSeparator }} - + @if (!toggleComponents.length) { - + } + @if (!clearComponents.length && value) { + + + + } + diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts index 01d03dc791d..152edaeab8e 100644 --- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts +++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts @@ -1,6 +1,6 @@ import { ComponentFixture, TestBed, fakeAsync, tick, waitForAsync, flush } from '@angular/core/testing'; import { Component, OnInit, ViewChild, DebugElement, ChangeDetectionStrategy } from '@angular/core'; -import { IgxInputDirective, IgxInputState, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from '../input-group/public_api'; +import { IgxInputDirective, IgxInputGroupComponent, IgxInputState, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from '../input-group/public_api'; import { PickerInteractionMode } from '../date-common/types'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { FormsModule, ReactiveFormsModule, UntypedFormBuilder, UntypedFormControl, Validators } from '@angular/forms'; @@ -20,7 +20,7 @@ import { Subject } from 'rxjs'; import { AsyncPipe } from '@angular/common'; import { AnimationService } from '../services/animation/animation'; import { IgxAngularAnimationService } from '../services/animation/angular-animation-service'; -import { IgxPickerToggleComponent } from '../date-common/picker-icons.common'; +import { IgxPickerClearComponent, IgxPickerToggleComponent } from '../date-common/picker-icons.common'; import { IgxIconComponent } from '../icon/icon.component'; import { registerLocaleData } from "@angular/common"; import localeJa from "@angular/common/locales/ja"; @@ -29,6 +29,7 @@ import localeBg from "@angular/common/locales/bg"; // The number of milliseconds in one day const DEBOUNCE_TIME = 16; const DEFAULT_ICON_TEXT = 'date_range'; +const CLEAR_ICON_TEXT = 'clear'; const DEFAULT_FORMAT_OPTIONS = { day: '2-digit', month: '2-digit', year: 'numeric' }; const CSS_CLASS_INPUT_BUNDLE = '.igx-input-group__bundle'; const CSS_CLASS_INPUT_START = '.igx-input-group__bundle-start' @@ -399,6 +400,100 @@ describe('IgxDateRangePicker', () => { }); }); + describe('Clear tests', () => { + const range = { start: new Date(2025, 1, 1), end: new Date(2025, 1, 2) }; + + describe('Default clear icon', () => { + it('should display default clear icon when value is set', () => { + const inputGroup = fixture.debugElement.query(By.directive(IgxInputGroupComponent)); + let suffix = inputGroup.query(By.directive(IgxSuffixDirective)); + expect(suffix).toBeNull(); + + dateRange.value = range; + fixture.detectChanges(); + + suffix = inputGroup.query(By.directive(IgxSuffixDirective)); + const icon = suffix.query(By.css(CSS_CLASS_ICON)); + expect(icon).not.toBeNull(); + expect(icon.nativeElement.textContent.trim()).toEqual(CLEAR_ICON_TEXT); + }); + + it('should clear the value when clicking the default clear icon (suffix)', fakeAsync(() => { + dateRange.value = range; + fixture.detectChanges(); + + const inputGroup = fixture.debugElement.query(By.directive(IgxInputGroupComponent)); + let suffix = inputGroup.query(By.directive(IgxSuffixDirective)); + spyOn(dateRange.valueChange, 'emit'); + + UIInteractions.simulateClickAndSelectEvent(suffix.nativeElement); + tick(); + fixture.detectChanges(); + + expect(dateRange.value).toBeNull(); + suffix = inputGroup.query(By.directive(IgxSuffixDirective)); + expect(suffix).toBeNull(); + expect(dateRange.valueChange.emit).toHaveBeenCalledOnceWith(null); + })); + + it('should not clear the value when clicking element in the suffix that is not the clear icon', fakeAsync(() => { + fixture = TestBed.createComponent(DateRangeTemplatesComponent); + fixture.detectChanges(); + + dateRange = fixture.debugElement.queryAll(By.directive(IgxDateRangePickerComponent))[0].componentInstance; + dateRange.value = range; + fixture.detectChanges(); + + const suffixIconText = 'flight_land'; + const inputGroupsEnd = fixture.debugElement.queryAll(By.css(CSS_CLASS_INPUT_END)); + + const customSuffix = inputGroupsEnd[1]; + expect(customSuffix.children[0].nativeElement.innerText).toBe(suffixIconText); + expect(customSuffix.children[0].children[0].classes[CSS_CLASS_ICON]).toBeTruthy(); + + const suffix = inputGroupsEnd[0]; + const icon = suffix.query(By.css(CSS_CLASS_ICON)); + expect(icon).not.toBeNull(); + expect(icon.nativeElement.textContent.trim()).toEqual(CLEAR_ICON_TEXT); + + UIInteractions.simulateClickAndSelectEvent(customSuffix.nativeElement); + tick(); + fixture.detectChanges(); + + expect(dateRange.value).toEqual(range); + })); + }); + + describe('Projected clear icon', () => { + it('should clear the value when clicking the projected clear icon', fakeAsync(() => { + fixture = TestBed.createComponent(DateRangeTemplatesComponent); + fixture.detectChanges(); + + dateRange = fixture.debugElement.queryAll(By.directive(IgxDateRangePickerComponent))[4].componentInstance; + + const pickerClear = fixture.debugElement.queryAll(By.directive(IgxPickerClearComponent))[0]; + // Projected clear icon is rendered even if value is unassigned + expect(pickerClear).not.toBeNull(); + + const suffixes = dateRange.element.nativeElement.querySelectorAll(CSS_CLASS_INPUT_END); + expect(suffixes.length).toBe(1); + // the default clear icon is overridden by the projected one + expect(suffixes[0].textContent.trim()).toEqual('delete'); + + dateRange.value = range; + fixture.detectChanges(); + + spyOn(dateRange.valueChange, 'emit'); + UIInteractions.simulateClickAndSelectEvent(pickerClear.nativeElement); + tick(); + fixture.detectChanges(); + + expect(dateRange.value).toBeNull(); + expect(dateRange.valueChange.emit).toHaveBeenCalledOnceWith(null); + })); + }); + }); + describe('Properties & events tests', () => { it('should display placeholder', () => { fixture.detectChanges(); @@ -707,19 +802,35 @@ describe('IgxDateRangePicker', () => { })); }); - it('should expand the calendar if the default icon is clicked', fakeAsync(() => { - const input = fixture.debugElement.query(By.css('igx-input-group')); - input.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); + it('should expand the calendar if the default icon (prefix) is clicked', fakeAsync(() => { + const prefix = fixture.debugElement.query(By.directive(IgxPrefixDirective)); + prefix.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); tick(); fixture.detectChanges(); expect(fixture.componentInstance.dateRange.collapsed).toBeFalsy(); })); - it('should not expand the calendar if the default icon is clicked when disabled is set to true', fakeAsync(() => { + it('should not expand the calendar if the input is clicked in dropdown mode', fakeAsync(() => { + UIInteractions.simulateClickAndSelectEvent(dateRange.getEditElement()); + tick(); + fixture.detectChanges(); + expect(fixture.componentInstance.dateRange.collapsed).toBeTruthy(); + })); + + it('should expand the calendar if the input is clicked in dialog mode', fakeAsync(() => { + dateRange.mode = PickerInteractionMode.Dialog; + fixture.detectChanges(); + UIInteractions.simulateClickAndSelectEvent(dateRange.getEditElement()); + fixture.detectChanges(); + tick(); + expect(fixture.componentInstance.dateRange.collapsed).toBeFalsy(); + })); + + it('should not expand the calendar if the default icon (in prefix) is clicked when disabled is set to true', fakeAsync(() => { fixture.componentInstance.disabled = true; fixture.detectChanges(); - const input = fixture.debugElement.query(By.css('igx-input-group')); - input.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); + const prefix = fixture.debugElement.query(By.directive(IgxPrefixDirective)); + prefix.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); tick(); fixture.detectChanges(); expect(fixture.componentInstance.dateRange.collapsed).toBeTruthy(); @@ -1323,6 +1434,16 @@ describe('IgxDateRangePicker', () => { expect(fixture.componentInstance.dateRange.collapsed).toBeFalsy(); })); + it('should expand the calendar if any of the inputs is clicked in dialog mode', fakeAsync(() => { + fixture.componentInstance.mode = PickerInteractionMode.Dialog; + fixture.detectChanges(); + endInput = fixture.debugElement.queryAll(By.css(CSS_CLASS_INPUT))[1]; + endInput.nativeElement.dispatchEvent(new Event('click')); + fixture.detectChanges(); + tick(); + expect(fixture.componentInstance.dateRange.collapsed).toBeFalsy(); + })); + it('should not expand the calendar if the default icon is clicked when disabled is set to true', fakeAsync(() => { fixture.componentInstance.disabled = true; fixture.detectChanges(); @@ -1562,6 +1683,39 @@ describe('IgxDateRangePicker', () => { expect(dateRange.locale).toEqual('en-US'); expect(dateRange.weekStart).toEqual(WEEKDAYS.FRIDAY); })); + + it('should render projected clear icons which clear the range on click', () => { + fixture = TestBed.createComponent(DateRangeTwoInputsClearComponent); + fixture.detectChanges(); + + const drp = fixture.debugElement.query(By.directive(IgxDateRangePickerComponent)).componentInstance; + const start = fixture.debugElement.query(By.directive(IgxDateRangeStartComponent)); + const end = fixture.debugElement.query(By.directive(IgxDateRangeEndComponent)); + + const startSuffix = start.nativeElement.querySelectorAll(CSS_CLASS_INPUT_END)[0]; + const endSuffix = end.nativeElement.querySelectorAll(CSS_CLASS_INPUT_END)[0]; + + expect(startSuffix.innerText).toBe('delete'); + expect(endSuffix.innerText).toBe('delete'); + + const pickerClearComponents = fixture.debugElement.queryAll(By.directive(IgxPickerClearComponent)); + + drp.value = { start: new Date(2025, 0, 1), end: new Date(2025, 0, 2) }; + fixture.detectChanges(); + + UIInteractions.simulateClickAndSelectEvent(pickerClearComponents[0].nativeNode); + fixture.detectChanges(); + + expect(drp.value).toEqual(null); + + drp.value = { start: new Date(2025, 0, 1), end: new Date(2025, 0, 2) }; + fixture.detectChanges(); + + UIInteractions.simulateClickAndSelectEvent(pickerClearComponents[1].nativeNode); + fixture.detectChanges(); + + expect(drp.value).toEqual(null); + }); }); }); }); @@ -1655,6 +1809,29 @@ export class DateRangeTwoInputsNgModelTestComponent extends DateRangeTestCompone public range = { start: new Date(2020, 1, 1), end: new Date(2020, 1, 4) }; } +@Component({ + selector: 'igx-date-range-two-inputs-clear', + template: ` + + + + + delete + + + + + + delete + + + `, + imports: [IgxDateRangePickerComponent, IgxDateRangeStartComponent, IgxDateRangeEndComponent, IgxInputDirective, + IgxDateTimeEditorDirective, FormsModule, IgxPickerClearComponent, IgxIconComponent, IgxSuffixDirective] +}) +export class DateRangeTwoInputsClearComponent extends DateRangeTestComponent { +} + @Component({ selector: 'igx-date-range-single-input-label-test', template: ` @@ -1710,11 +1887,16 @@ export class DateRangeCustomComponent extends DateRangeTestComponent { flight_land - - calendar_view_day - - + + calendar_view_day + + + + + + delete + `, imports: [ @@ -1722,6 +1904,7 @@ export class DateRangeCustomComponent extends DateRangeTestComponent { IgxDateRangeStartComponent, IgxDateRangeEndComponent, IgxPickerToggleComponent, + IgxPickerClearComponent, IgxIconComponent, FormsModule, IgxInputDirective, diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts index e6b5edca0ba..9c31ee9025c 100644 --- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts +++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts @@ -24,7 +24,7 @@ import { DateTimeUtil } from '../date-common/util/date-time.util'; import { IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive'; import { IgxInputDirective, IgxInputGroupComponent, IgxInputGroupType, IgxInputState, - IgxLabelDirective, IGX_INPUT_GROUP_TYPE + IgxLabelDirective, IGX_INPUT_GROUP_TYPE, IgxSuffixDirective } from '../input-group/public_api'; import { AutoPositionStrategy, IgxOverlayService, OverlayCancelableEventArgs, OverlayEventArgs, @@ -73,6 +73,7 @@ const SingleInputDatesConcatenationString = ' - '; IgxInputGroupComponent, IgxInputDirective, IgxPrefixDirective, + IgxSuffixDirective, DateRangePickerFormatPipe ] }) @@ -574,6 +575,30 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective this.handleSelection(dateRange); } + /** + * Clears the input field(s) and the picker's value. + * + * @example + * ```typescript + * this.dateRangePicker.clear(); + * ``` + */ + public clear(): void { + if (this.disabled) { + return; + } + + this.value = null; + this._calendar?.deselectDate(); + if (this.hasProjectedInputs) { + this.projectedInputs.forEach((i) => { + i.inputDirective.clear(); + }); + } else { + this.inputDirective.clear(); + } + } + /** @hidden @internal */ public writeValue(value: DateRange): void { this.updateValue(value); @@ -643,6 +668,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective public override ngAfterViewInit(): void { super.ngAfterViewInit(); this.subscribeToDateEditorEvents(); + this.subscribeToClick(); this.configPositionStrategy(); this.configOverlaySettings(); this.cacheFocusedInput(); @@ -697,8 +723,8 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective } /** @hidden @internal */ - public getEditElement() { - return this.inputDirective.nativeElement; + public getEditElement(): HTMLInputElement | undefined { + return this.inputDirective?.nativeElement; } protected onStatusChanged = () => { @@ -957,6 +983,21 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective return { start: range.start as Date, end: range.end as Date }; } + private subscribeToClick() { + const inputs = this.hasProjectedInputs + ? this.projectedInputs.map(i => i.inputDirective.nativeElement) + : [this.getEditElement()]; + inputs.forEach(input => { + fromEvent(input, 'click') + .pipe(takeUntil(this._destroy$)) + .subscribe(() => { + if (!this.isDropdown) { + this.toggle(); + } + }); + }); + } + private subscribeToDateEditorEvents(): void { if (this.hasProjectedInputs) { const start = this.projectedInputs.find(i => i instanceof IgxDateRangeStartComponent) as IgxDateRangeStartComponent; diff --git a/projects/igniteui-angular/src/lib/date-range-picker/public_api.ts b/projects/igniteui-angular/src/lib/date-range-picker/public_api.ts index 2b0e4fa2367..b73fa48aa22 100644 --- a/projects/igniteui-angular/src/lib/date-range-picker/public_api.ts +++ b/projects/igniteui-angular/src/lib/date-range-picker/public_api.ts @@ -1,4 +1,4 @@ -import { IgxPickerToggleComponent } from '../date-common/picker-icons.common'; +import { IgxPickerClearComponent, IgxPickerToggleComponent } from '../date-common/picker-icons.common'; import { IgxHintDirective } from '../directives/hint/hint.directive'; import { IgxLabelDirective } from '../directives/label/label.directive'; import { IgxPrefixDirective } from '../directives/prefix/prefix.directive'; @@ -13,6 +13,7 @@ export * from './date-range-picker.component'; export const IGX_DATE_RANGE_PICKER_DIRECTIVES = [ IgxDateRangePickerComponent, IgxPickerToggleComponent, + IgxPickerClearComponent, IgxDateRangeStartComponent, IgxDateRangeEndComponent, IgxDateRangeSeparatorDirective, diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts index c5174302fec..87f422975fa 100644 --- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts +++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts @@ -308,9 +308,6 @@ export class IgxTimePickerComponent extends PickerBaseDirective @ViewChild('ampmList') public ampmList: ElementRef; - /** @hidden @internal */ - @ContentChildren(IgxPickerClearComponent) - public clearComponents: QueryList; /** @hidden @internal */ @ContentChild(IgxLabelDirective) @@ -746,10 +743,6 @@ export class IgxTimePickerComponent extends PickerBaseDirective } }); - this.subToIconsClicked(this.clearComponents, () => this.clear()); - this.clearComponents.changes.pipe(takeUntil(this._destroy$)) - .subscribe(() => this.subToIconsClicked(this.clearComponents, () => this.clear())); - if (this._ngControl) { this._statusChanges$ = this._ngControl.statusChanges.subscribe(this.onStatusChanged.bind(this)); this._inputGroup.isRequired = this.required; diff --git a/src/app/date-range/date-range.sample.html b/src/app/date-range/date-range.sample.html index fceb8e868b9..6b74876a105 100644 --- a/src/app/date-range/date-range.sample.html +++ b/src/app/date-range/date-range.sample.html @@ -30,9 +30,18 @@
Without forms
calendar_view_day + + clear + + + calendar_view_day + + + clear + diff --git a/src/app/date-range/date-range.sample.ts b/src/app/date-range/date-range.sample.ts index 52a26f19be6..6e625793c1a 100644 --- a/src/app/date-range/date-range.sample.ts +++ b/src/app/date-range/date-range.sample.ts @@ -1,7 +1,7 @@ import { Component, ViewChild } from '@angular/core'; import { JsonPipe } from '@angular/common'; import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl, ValidatorFn, AbstractControl, FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { DateRange, IgxButtonDirective, IgxDateRangeEndComponent, IgxDateRangePickerComponent, IgxDateRangeStartComponent, IgxDateTimeEditorDirective, IgxIconComponent, IgxInputDirective, IgxLabelDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxRadioComponent, IgxRippleDirective, IgxSuffixDirective, IGX_INPUT_GROUP_TYPE, IChangeCheckboxEventArgs } from 'igniteui-angular'; +import { DateRange, IgxButtonDirective, IgxDateRangeEndComponent, IgxDateRangePickerComponent, IgxDateRangeStartComponent, IgxDateTimeEditorDirective, IgxIconComponent, IgxInputDirective, IgxLabelDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxRadioComponent, IgxRippleDirective, IgxSuffixDirective, IGX_INPUT_GROUP_TYPE, IChangeCheckboxEventArgs, IgxPickerClearComponent } from 'igniteui-angular'; @Component({ @@ -14,7 +14,9 @@ import { DateRange, IgxButtonDirective, IgxDateRangeEndComponent, IgxDateRangePi useValue: 'border' } ], - imports: [IgxButtonDirective, IgxRippleDirective, IgxDateRangePickerComponent, IgxPickerToggleComponent, IgxSuffixDirective, IgxIconComponent, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxPrefixDirective, IgxDateRangeEndComponent, FormsModule, IgxLabelDirective, IgxRadioComponent, ReactiveFormsModule, JsonPipe] + imports: [IgxButtonDirective, IgxRippleDirective, IgxDateRangePickerComponent, IgxPickerToggleComponent, IgxSuffixDirective, + IgxIconComponent, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxPrefixDirective, + IgxDateRangeEndComponent, FormsModule, IgxLabelDirective, IgxRadioComponent, ReactiveFormsModule, JsonPipe, IgxPickerClearComponent] }) export class DateRangeSampleComponent { @ViewChild('dr1', { static: true })