feat(dp): add activeDate property + tests

Author: ddaribo

projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts

@@ -103,6 +103,59 @@ describe('IgxDatePicker', () => {
                 expect(datePicker['_calendar'].orientation).toEqual(PickerCalendarOrientation.Vertical.toString());
                 expect(datePicker['_calendar'].wrapper.nativeElement).toHaveClass(CSS_CLASS_CALENDAR_WRAPPER_VERTICAL);
             }));
+
+            it('should initialize activeDate with current date, when not set', fakeAsync(() => {
+                const datePicker = fixture.componentInstance.datePicker;
+                datePicker.value = null;
+                fixture.detectChanges();
+                const todayDate = new Date();
+                const today = new Date(todayDate.setHours(0, 0, 0, 0)).getTime().toString();
+
+                expect(datePicker.activeDate).toEqual(todayDate);
+
+                datePicker.open();
+                fixture.detectChanges();
+
+                expect(datePicker['_calendar'].activeDate).toEqual(todayDate);
+                expect(datePicker['_calendar'].value).toBeUndefined();
+                const wrapper = fixture.debugElement.query(By.css('.igx-calendar__wrapper')).nativeElement;
+                expect(wrapper.getAttribute('aria-activedescendant')).toEqual(today);
+            }));
+
+            it('should initialize activeDate = value when it is not set, but value is', fakeAsync(() => {
+                const datePicker = fixture.componentInstance.datePicker;
+                const date = fixture.componentInstance.date;
+
+                expect(datePicker.activeDate).toEqual(date);
+                datePicker.open();
+                fixture.detectChanges();
+
+                const activeDescendantDate = new Date(date.setHours(0, 0, 0, 0)).getTime().toString();
+                expect(datePicker['_calendar'].activeDate).toEqual(date);
+                expect(datePicker['_calendar'].value).toEqual(date);
+                const wrapper = fixture.debugElement.query(By.css('.igx-calendar__wrapper')).nativeElement;
+                expect(wrapper.getAttribute('aria-activedescendant')).toEqual(activeDescendantDate);
+            }));
+
+            it('should set activeDate correctly', fakeAsync(() => {
+                const datePicker = fixture.componentInstance.datePicker;
+                const targetDate = new Date(2025, 0, 1);
+                datePicker.activeDate = new Date(targetDate);
+                fixture.detectChanges();
+
+                expect(datePicker.activeDate).toEqual(targetDate);
+                expect(datePicker.value).toEqual(fixture.componentInstance.date);
+
+                datePicker.open();
+                fixture.detectChanges();
+
+                const activeDescendantDate = new Date(targetDate.setHours(0, 0, 0, 0)).getTime().toString();
+                expect(datePicker['_calendar'].activeDate).toEqual(targetDate);
+                expect(datePicker['_calendar'].viewDate.getMonth()).toEqual(targetDate.getMonth());
+                expect(datePicker['_calendar'].value).toEqual(fixture.componentInstance.date);
+                const wrapper = fixture.debugElement.query(By.css('.igx-calendar__wrapper')).nativeElement;
+                expect(wrapper.getAttribute('aria-activedescendant')).toEqual(activeDescendantDate);
+            }));
         });
 
         describe('Events', () => {

projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts

@@ -160,6 +160,17 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
     @Input({ transform: booleanAttribute })
     public showWeekNumbers: boolean;
 
+    @Input()
+    public get activeDate(): Date {
+        const today = new Date(new Date().setHours(0, 0, 0, 0));
+        const dateValue = DateTimeUtil.isValidDate(this._dateValue) ? new Date(this._dateValue.setHours(0, 0, 0, 0)) : null;
+        return this._activeDate ?? dateValue ?? this._calendar?.activeDate ?? today;
+    }
+
+    public set activeDate(value: Date) {
+        this._activeDate = value;
+    }
+
     /**
      * Gets/Sets a custom formatter function on the selected or passed date.
      *
@@ -468,6 +479,7 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
     private _calendarContainer?: HTMLElement;
     private _specialDates: DateRangeDescriptor[] = null;
     private _disabledDates: DateRangeDescriptor[] = null;
+    private _activeDate: Date = null;
     private _overlaySubFilter:
         [MonoTypeOperatorFunction<OverlayEventArgs>,
             MonoTypeOperatorFunction<OverlayEventArgs | OverlayCancelableEventArgs>] = [
@@ -873,7 +885,10 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
             date.setMilliseconds(this.dateValue.getMilliseconds());
         }
         this.value = date;
-        this._calendar.viewDate = date;
+        if (this._calendar) {
+            this._calendar.activeDate = this.activeDate;
+            this._calendar.viewDate = this.activeDate;
+        }
         this.close();
     }
 
@@ -964,7 +979,6 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
         }
     }
 
-
     private _initializeCalendarContainer(componentInstance: IgxCalendarContainerComponent) {
         this._calendar = componentInstance.calendar;
         this._calendar.hasHeader = !this.isDropdown && !this.hideHeader;