fix(components/datetime): notify date range value changes when switch…

…ing between calculators without datepickers (#2738)

libs/components/datetime/src/lib/modules/date-range-picker/date-range-picker.component.spec.ts

@@ -702,6 +702,37 @@ describe('Date range picker', function () {
     expect(() => fixture.detectChanges()).not.toThrow();
   });
 
+  it('should notify value changes when switching between calculators without datepickers', fakeAsync(() => {
+    // Initialize control with a calculator that does not include datepickers.
+    component.dateRange?.setValue({
+      calculatorId: SkyDateRangeCalculatorId.Today,
+    });
+    detectChanges();
+
+    expect(component.reactiveForm.value).toEqual({
+      dateRange: { calculatorId: SkyDateRangeCalculatorId.Today },
+    });
+
+    selectCalculator(SkyDateRangeCalculatorId.AnyTime);
+    detectChanges();
+
+    expect(component.reactiveForm.value).toEqual({
+      dateRange: {
+        calculatorId: SkyDateRangeCalculatorId.AnyTime,
+        startDate: null,
+        endDate: null,
+      },
+    });
+
+    selectCalculator(SkyDateRangeCalculatorId.LastQuarter);
+    detectChanges();
+
+    const value = component.reactiveForm.value.dateRange;
+    expect(value.calculatorId).toEqual(SkyDateRangeCalculatorId.LastQuarter);
+    expect(value.startDate).toEqual(jasmine.any(Date));
+    expect(value.endDate).toEqual(jasmine.any(Date));
+  }));
+
   describe('accessibility', () => {
     function verifyFormFieldsRequired(expectation: boolean): void {
       const inputBoxes =

libs/components/datetime/src/lib/modules/date-range-picker/date-range-picker.component.ts

@@ -358,16 +358,10 @@ export class SkyDateRangePickerComponent
             // need it to be a number.
             value.calculatorId = +value.calculatorId;
 
-            // If the calculator ID is changed, we need to reset the start and
-            // end date values and wait until the next valueChanges event to
-            // notify the host control.
+            // Reset the start and end date values if the calculator ID changes.
             if (value.calculatorId !== this.#getValue().calculatorId) {
-              this.#setValue(
-                { calculatorId: value.calculatorId },
-                { emitEvent: true },
-              );
-
-              return;
+              delete value.endDate;
+              delete value.startDate;
             }
           }
 
@@ -551,13 +545,13 @@ export class SkyDateRangePickerComponent
   ): void {
     const oldValue = this.#getValue();
 
-    const valueOrDefault =
-      !value || isNullOrUndefined(value.calculatorId)
-        ? this.#getDefaultValue(this.calculators[0])
-        : {
-            ...this.#getDefaultValue(this.#getCalculator(value.calculatorId)),
-            ...value,
-          };
+    const isValueEmpty = !value || isNullOrUndefined(value.calculatorId);
+    const valueOrDefault = isValueEmpty
+      ? this.#getDefaultValue(this.calculators[0])
+      : {
+          ...this.#getDefaultValue(this.#getCalculator(value.calculatorId)),
+          ...value,
+        };
 
     // Ensure falsy values are set to null.
     valueOrDefault.endDate = valueOrDefault.endDate || null;