feat(range-picker): update calendar when value is updated (#10004)

Co-authored-by: Konstantin Dinev <[email protected]>

Author: jackofdiamond5

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

@@ -758,6 +758,18 @@ describe('IgxDateRangePicker', () => {
 
                 disabled$.complete();
             }));
+
+            it('should update the calendar while it\'s open and the value has been updated', fakeAsync(() => {
+                dateRange.open();
+                tick();
+                fixture.detectChanges();
+
+                const range = { start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 1)) };
+                dateRange.value = range;
+                fixture.detectChanges();
+
+                expect((dateRange as any).calendar.selectedDates.length).toBeGreaterThan(0);
+            }));
         });
 
         describe('Two Inputs', () => {
@@ -1170,6 +1182,18 @@ describe('IgxDateRangePicker', () => {
                 disabled$.complete();
             }));
 
+            it('should update the calendar while it\'s open and the value has been updated', fakeAsync(() => {
+                dateRange.open();
+                tick();
+                fixture.detectChanges();
+
+                const range = { start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 1)) };
+                dateRange.value = range;
+                fixture.detectChanges();
+
+                expect((dateRange as any).calendar.selectedDates.length).toBeGreaterThan(0);
+            }));
+
             describe('Data binding', () => {
                 it('should properly update component value with ngModel bound to projected inputs - #7353', fakeAsync(() => {
                     fixture = TestBed.createComponent(DateRangeTwoInputsNgModelTestComponent);

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

@@ -767,6 +767,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
     private updateValue(value: DateRange) {
         this._value = value ? value : null;
         this.updateInputs();
+        this.updateCalendar();
     }
 
     private updateValidityOnBlur() {
@@ -847,6 +848,9 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
     }
 
     private updateCalendar(): void {
+        if (!this.calendar) {
+             return;
+        }
         this.calendar.disabledDates = [];
         const minValue = this.parseMinValue(this.minValue);
         if (minValue) {