diff --git a/libs/components/datetime/src/lib/modules/date-range-picker/date-range-picker.component.spec.ts b/libs/components/datetime/src/lib/modules/date-range-picker/date-range-picker.component.spec.ts index fc838cbee5..e14517f5cb 100644 --- a/libs/components/datetime/src/lib/modules/date-range-picker/date-range-picker.component.spec.ts +++ b/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 = diff --git a/libs/components/datetime/src/lib/modules/date-range-picker/date-range-picker.component.ts b/libs/components/datetime/src/lib/modules/date-range-picker/date-range-picker.component.ts index 0e2b59a7cb..d6d2133f98 100644 --- a/libs/components/datetime/src/lib/modules/date-range-picker/date-range-picker.component.ts +++ b/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;