From 7f767f763eb2212dd223c8a6acc42212383739b8 Mon Sep 17 00:00:00 2001 From: Boris Date: Wed, 7 Apr 2021 09:30:27 +0300 Subject: [PATCH] fix(date-picker): properly set required, coerce cal date focus to valid range - set outlet on open --- .../date-picker/date-picker.component.html | 5 +-- .../lib/date-picker/date-picker.component.ts | 43 ++++++++++++++----- 2 files changed, 34 insertions(+), 14 deletions(-) diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.html b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.html index 9fd935cb1d5..fc806cbb8c1 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.html +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.html @@ -7,9 +7,8 @@ [igxDateTimeEditor]="this.inputFormat" [minValue]="this.minValue" [maxValue]="this.maxValue" [spinDelta]="this.spinDelta" [spinLoop]="this.spinLoop" [displayFormat]="this.displayFormat" [disabled]="this.disabled" [placeholder]="this.placeholder" [readonly]="!this.isDropdown" - [igxTextSelection]="this.isDropdown" [required]="this.required" [locale]="this.locale" - [attr.aria-expanded]="!this.collapsed" [attr.aria-labelledby]="this.label?.id" - [attr.aria-required]="this.required" aria-haspopup="dialog" aria-autocomplete="none" role="combobox"> + [igxTextSelection]="this.isDropdown" [locale]="this.locale" [attr.aria-expanded]="!this.collapsed" + [attr.aria-labelledby]="this.label?.id" aria-haspopup="dialog" aria-autocomplete="none" role="combobox"> clear 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 105360118ec..91336b7a753 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 @@ -444,6 +444,7 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr private _value: Date; private _overlayId: string; + private _targetViewDate: Date; private _destroy$ = new Subject(); private _ngControl: NgControl = null; private _statusChanges$: Subscription; @@ -464,14 +465,12 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr positionStrategy: new AutoPositionStrategy({ openAnimation: fadeIn, closeAnimation: fadeOut - }), - outlet: this.outlet + }) }; private _dialogOverlaySettings: OverlaySettings = { closeOnOutsideClick: true, modal: true, - closeOnEscape: true, - outlet: this.outlet + closeOnEscape: true }; private _calendarFormat: IFormattingOptions = { day: 'numeric', @@ -560,6 +559,9 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr if (this.isDropdown && this.inputGroupElement) { overlaySettings.target = this.inputGroupElement; } + if (this.outlet) { + overlaySettings.outlet = this.outlet; + } this._overlayId = this._overlayService .attach(IgxCalendarContainerComponent, overlaySettings, this._moduleRef); @@ -813,9 +815,7 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr (this._ngControl.control.validator || this._ngControl.control.asyncValidator)) { this.updateValidity(); } - if (this.inputGroup.isRequired !== this.required) { - this.inputGroup.isRequired = this.required; - } + this.inputGroup.isRequired = this.required; }; private handleSelection(date: Date): void { @@ -862,7 +862,13 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr this._overlayService.onOpened.pipe(...this._overlaySubFilter).subscribe((eventArgs) => { this.opened.emit(eventArgs as IBaseEventArgs); - this._calendar?.daysView?.focusActiveDate(); + if (this._calendar?.daysView?.selectedDates) { + this._calendar?.daysView?.focusActiveDate(); + } else { + this._targetViewDate.setHours(0, 0, 0, 0); + this._calendar?.daysView?.dates + .find(d => d.date.date.getTime() === this._targetViewDate.getTime())?.nativeElement.focus(); + } }); this._overlayService.onClosing.pipe(...this._overlaySubFilter).subscribe((eventArgs) => { @@ -878,10 +884,10 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr }); this._overlayService.onClosed.pipe(...this._overlaySubFilter).subscribe((event) => { - this._collapsed = true; - this._overlayId = null; this.closed.emit(event as IBaseEventArgs); this._overlayService.detach(this._overlayId); + this._collapsed = true; + this._overlayId = null; }); } @@ -925,8 +931,8 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr if (DateTimeUtil.isValidDate(this.value)) { // calendar will throw if this.value is InvalidDate #9208 this._calendar.value = this.value; - this._calendar.viewDate = this.value; } + this.setCalendarViewDate(); componentInstance.mode = this.mode; componentInstance.vertical = isVertical; @@ -937,4 +943,19 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr componentInstance.calendarClose.pipe(takeUntil(this._destroy$)).subscribe(() => this.close()); componentInstance.todaySelection.pipe(takeUntil(this._destroy$)).subscribe(() => this.selectToday()); } + + private setCalendarViewDate() { + // TODO: use ISO date parser from DateUtil + const minValueAsDate = parseDate(this.minValue); + const maxValueAsDate = parseDate(this.maxValue); + if (DateTimeUtil.lessThanMinValue(this.value, minValueAsDate)) { + this._calendar.viewDate = this._targetViewDate = minValueAsDate; + return; + } + if (DateTimeUtil.greaterThanMaxValue(this.value, maxValueAsDate)) { + this._calendar.viewDate = this._targetViewDate = maxValueAsDate; + return; + } + this._calendar.viewDate = this.value; + } }