From e903b6f1f2f1695dc73e40814a00c4efd72e1a5e Mon Sep 17 00:00:00 2001 From: georgianastasov Date: Thu, 23 Apr 2026 15:10:49 +0300 Subject: [PATCH] fix(date-range-picker): prevent mutating passed date range values --- .../date-range-picker.component.spec.ts | 28 +++++++++++++++++-- .../date-range-picker.component.ts | 2 +- 2 files changed, 27 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.spec.ts b/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.spec.ts index b75e6725c08..ab123988cbb 100644 --- a/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.spec.ts +++ b/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'; diff --git a/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts index b6f0221fba2..5f1eea734e8 100644 --- a/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts +++ b/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; }