fix(date-range-picker): prevent mutating passed date range values - 21.2.x

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

@@ -8,7 +8,7 @@ import { By } from '@angular/platform-browser';
 import { ControlsFunction } from '../../../test-utils/controls-functions.spec';
 import { UIInteractions } from '../../../test-utils/ui-interactions.spec';
 import { HelperTestFunctions } from '../../../test-utils/calendar-helper-utils';
-import { CancelableEventArgs, I18N_FORMATTER, WEEKDAYS } from 'igniteui-angular/core';
+import { CancelableEventArgs, WEEKDAYS } from 'igniteui-angular/core';
 import { IgxDateRangeSeparatorDirective, IgxDateRangeStartComponent } from './date-range-picker-inputs.common';
 import { IgxDateTimeEditorDirective } from '../../../directives/src/directives/date-time-editor/date-time-editor.directive';
 import { DateRangeType } from 'igniteui-angular/core';
@@ -22,7 +22,7 @@ import { IgxIconComponent } from 'igniteui-angular/icon';
 import { registerLocaleData } from "@angular/common";
 import localeJa from "@angular/common/locales/ja";
 import localeBg from "@angular/common/locales/bg";
-import { CalendarDay, BaseFormatter } from 'igniteui-angular/core';
+import { CalendarDay } from 'igniteui-angular/core';
 import { IgxCalendarComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarHeaderTitleTemplateDirective, IgxCalendarSubheaderTemplateDirective } from 'igniteui-angular/calendar';
 import { KeyboardNavigationService } from 'igniteui-angular/calendar/src/calendar/calendar.services';
 
@@ -50,6 +50,7 @@ const CSS_CLASS_CALENDAR_HEADER_TITLE = '.igx-calendar__header-year';
 const CSS_CLASS_CALENDAR_SUBHEADER = '.igx-calendar-picker__dates';
 const CSS_CLASS_CALENDAR_HEADER = '.igx-calendar__header';
 const CSS_CLASS_CALENDAR_WRAPPER_VERTICAL = 'igx-calendar__wrapper--vertical';
+
 describe('IgxDateRangePicker', () => {
     describe('Unit tests: ', () => {
         let mockElement: any;
@@ -1067,6 +1068,29 @@ describe('IgxDateRangePicker', () => {
                     fixture.detectChanges();
                     verifyDateRange();
                 });
+
+                it('should not mutate the time of the passed-in value when opening the picker', fakeAsync(() => {
+                    const start = new Date(2026, 4, 10, 14, 30, 45);
+                    const end = new Date(2026, 4, 20, 15, 15, 30);
+                    dateRange.value = { start, end };
+                    fixture.detectChanges();
+
+                    dateRange.open();
+                    tick();
+                    fixture.detectChanges();
+
+                    expect(start.getHours()).toBe(14);
+                    expect(start.getMinutes()).toBe(30);
+                    expect(start.getSeconds()).toBe(45);
+                    expect(end.getHours()).toBe(15);
+                    expect(end.getMinutes()).toBe(15);
+                    expect(end.getSeconds()).toBe(30);
+
+                    dateRange.close();
+                    tick();
+                    fixture.detectChanges();
+                }));
+
                 it('should support different input and display formats', () => {
                     let inputFormat = 'dd/MM/yy';
                     let displayFormat = 'longDate';

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

@@ -475,7 +475,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
     @Input()
     public get activeDate(): Date {
         const today = new Date(new Date().setHours(0, 0, 0, 0));
-        const dateValue = DateTimeUtil.isValidDate(this._firstDefinedInRange) ? new Date(this._firstDefinedInRange.setHours(0, 0, 0, 0)) : null;
+        const dateValue = DateTimeUtil.isValidDate(this._firstDefinedInRange) ? new Date(new Date(this._firstDefinedInRange.getTime()).setHours(0, 0, 0, 0)) : null;
         return this._activeDate ?? dateValue ?? this._calendar?.activeDate ?? today;
     }