date-range selectedRange highlighted date fix (#1141)

* daterange-component selectedrange highlighted date fix

* changelog added

* fix clicking on cancel is converting the selected
preset values to timestamps

* fix lint issue

* fix test

---------

Co-authored-by: Alok Sahu <[email protected]>

Author: sreyaswimlane

projects/swimlane/ngx-ui/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## HEAD (unreleased)
 
+- Fix (`ngx-date-range-picker`): Preset values now retain their relative expressions when cancel is clicked, instead of being converted to timestamps
+- Fix (`ngx-date-range-picker`): Fix highlight the date for given `selectedRange` values.
+
 ## 50.1.3 (2025-09-23)
 
 - Fix (`ngx-multi-dimension-selection`): Show children of items matching search term

projects/swimlane/ngx-ui/src/lib/components/date-range-calendar/date-range-picker.component.spec.ts

@@ -139,7 +139,12 @@ describe('DateRangePickerComponent', () => {
   it('should reset to last confirmed range onCancel when present', () => {
     const confirmedStart = new Date('2023-01-01');
     const confirmedEnd = new Date('2023-01-10');
-    component.lastConfirmedRange = { startDate: confirmedStart, endDate: confirmedEnd };
+    component.lastConfirmedRange = {
+      startDate: confirmedStart,
+      endDate: confirmedEnd,
+      startRaw: '2023-01-01',
+      endRaw: '2023-01-10'
+    };
     spyOn(component.cancel, 'emit');
     component.onCancel();
     expect(component.form.startDate).toEqual(confirmedStart);

projects/swimlane/ngx-ui/src/lib/components/date-range-calendar/date-range-picker.component.ts

@@ -80,7 +80,7 @@ export class DateRangePickerComponent implements OnInit, OnChanges {
   @ViewChild('wrapperRef', { static: false }) wrapperRef!: DropdownComponent;
 
   private readonly dateFormat: string = 'yyyy-MM-dd HH:mm:ss';
-  lastConfirmedRange: { startDate: Date; endDate: Date } = null;
+  lastConfirmedRange: { startDate: Date; endDate: Date; startRaw: string; endRaw: string } = null;
 
   form: DateRangeForm = { startRaw: '', endRaw: '', startDate: null, endDate: null };
 
@@ -154,12 +154,15 @@ export class DateRangePickerComponent implements OnInit, OnChanges {
           : this.selectedRange.end;
       this.lastConfirmedRange = {
         startDate,
-        endDate
+        endDate,
+        startRaw: this.selectedRange.start,
+        endRaw: this.selectedRange.end
       };
       this.form.startRaw = this.selectedRange.start;
       this.form.endRaw = this.selectedRange.end;
       this.form.startDate = startDate;
       this.form.endDate = endDate;
+      this.rangeModel = { startDate, endDate };
       this.setTooltipDate(startDate, endDate);
     }
   }
@@ -284,7 +287,9 @@ export class DateRangePickerComponent implements OnInit, OnChanges {
     if (this.form.startDate && this.form.endDate) {
       this.lastConfirmedRange = {
         startDate: this.form.startDate,
-        endDate: this.form.endDate
+        endDate: this.form.endDate,
+        startRaw: this.form.startRaw,
+        endRaw: this.form.endRaw
       };
       this.updateSelectedLabel();
       this.apply.emit({
@@ -304,10 +309,13 @@ export class DateRangePickerComponent implements OnInit, OnChanges {
       this.form = {
         startDate: this.lastConfirmedRange.startDate,
         endDate: this.lastConfirmedRange.endDate,
-        startRaw: format(this.lastConfirmedRange.startDate, this.dateFormat),
-        endRaw: format(this.lastConfirmedRange.endDate, this.dateFormat)
+        startRaw: this.lastConfirmedRange.startRaw,
+        endRaw: this.lastConfirmedRange.endRaw
+      };
+      this.rangeModel = {
+        startDate: this.lastConfirmedRange.startDate,
+        endDate: this.lastConfirmedRange.endDate
       };
-      this.rangeModel = { ...this.lastConfirmedRange };
     } else {
       // First-time cancel before any apply: reset form
       this.form = {