feat(dp): update calendar days view on typing & value is another view-month/year

Author: ddaribo

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

@@ -343,6 +343,23 @@ describe('IgxDatePicker', () => {
                 const expectedDate = new Date(2025, 0, 2);
                 expect(datePicker.value).toEqual(expectedDate);
                 expect(datePicker.activeDate).toEqual(expectedDate);
+            it('should update the calendar view and active date on typing a date that is not in the current view', fakeAsync(() => {
+                const date = new Date(2025, 0, 1);
+                datePicker.value = date;
+                datePicker.open();
+                fixture.detectChanges();
+
+                const input = fixture.debugElement.query(By.css('.igx-input-group__input'));
+                input.nativeElement.focus();
+                tick();
+                fixture.detectChanges();
+
+                fixture.detectChanges();
+                UIInteractions.simulateTyping('02/11/2025', input);
+
+                const expectedDate = new Date(2025, 10, 2);
+                expect(datePicker.value).toEqual(expectedDate);
+                expect(datePicker.activeDate).toEqual(expectedDate);
 
                 const activeDescendantDate = new Date(expectedDate.setHours(0, 0, 0, 0)).getTime().toString();
                 expect(datePicker['_calendar'].activeDate).toEqual(expectedDate);

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

@@ -160,6 +160,11 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
     @Input({ transform: booleanAttribute })
     public showWeekNumbers: boolean;
 
+
+    /**
+     * Gets/Sets the date which is shown in the calendar picker and is highlighted.
+     * By default it is the current date, or the value of the picker, if set.
+     */
     @Input()
     public get activeDate(): Date {
         const today = new Date(new Date().setHours(0, 0, 0, 0));
@@ -846,6 +851,9 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
         this._dateValue = DateTimeUtil.isValidDate(value) ? value : DateTimeUtil.parseIsoDate(value);
         if (this._calendar) {
             this._calendar.selectDate(this._dateValue);
+            this._calendar.activeDate = this.activeDate;
+            this._calendar.viewDate = this.activeDate;
+            this.cdr.detectChanges();
         }
     }