diff --git a/packages/calcite-components/src/components/date-picker/date-picker.e2e.ts b/packages/calcite-components/src/components/date-picker/date-picker.e2e.ts index 547f3bed2fb..0ce739adc3b 100644 --- a/packages/calcite-components/src/components/date-picker/date-picker.e2e.ts +++ b/packages/calcite-components/src/components/date-picker/date-picker.e2e.ts @@ -526,4 +526,26 @@ describe("calcite-date-picker", () => { expect(await datePicker.getProperty("value")).toEqual(["2023-12-08", "2024-02-08"]); }); }); + + it("restarts range on selection after a range is complete when proximitySelectionDisabled is set", async () => { + const page = await newE2EPage(); + await page.setContent( + html` `, + ); + const datePicker = await page.find("calcite-date-picker"); + + await selectDay("20200908", page, "mouse"); + await page.waitForChanges(); + await selectDay("20200923", page, "mouse"); + await page.waitForChanges(); + expect(await datePicker.getProperty("value")).toEqual(["2020-09-08", "2020-09-23"]); + + await selectDay("20200915", page, "mouse"); + await page.waitForChanges(); + expect(await datePicker.getProperty("value")).toEqual(["2020-09-15", ""]); + + await selectDay("20200930", page, "mouse"); + await page.waitForChanges(); + expect(await datePicker.getProperty("value")).toEqual(["2020-09-15", "2020-09-30"]); + }); }); diff --git a/packages/calcite-components/src/components/date-picker/date-picker.tsx b/packages/calcite-components/src/components/date-picker/date-picker.tsx index d11f7eb8cb8..d2c272f52f4 100644 --- a/packages/calcite-components/src/components/date-picker/date-picker.tsx +++ b/packages/calcite-components/src/components/date-picker/date-picker.tsx @@ -409,7 +409,21 @@ export class DatePicker implements LocalizedComponent, LoadableComponent, T9nCom start, end, }; - if (!this.proximitySelectionDisabled) { + + if (this.proximitySelectionDisabled) { + if ((end && start) || (!end && date >= start)) { + this.hoverRange.focused = "end"; + this.hoverRange.end = date; + } else if (!end && date < start) { + this.hoverRange = { + focused: "start", + start: date, + end: start, + }; + } else { + this.hoverRange = undefined; + } + } else { if (start && end) { const startDiff = getDaysDiff(date, start); const endDiff = getDaysDiff(date, end); @@ -440,21 +454,6 @@ export class DatePicker implements LocalizedComponent, LoadableComponent, T9nCom } } } - } else { - if (!end) { - if (date < start) { - this.hoverRange = { - focused: "start", - start: date, - end: start, - }; - } else { - this.hoverRange.end = date; - this.hoverRange.focused = "end"; - } - } else { - this.hoverRange = undefined; - } } event.stopPropagation(); }; @@ -594,7 +593,10 @@ export class DatePicker implements LocalizedComponent, LoadableComponent, T9nCom } else if (!end) { this.setEndDate(date); } else { - if (!this.proximitySelectionDisabled) { + if (this.proximitySelectionDisabled) { + this.setStartDate(date); + this.setEndDate(null); + } else { if (this.activeRange) { if (this.activeRange == "end") { this.setEndDate(date); @@ -614,8 +616,6 @@ export class DatePicker implements LocalizedComponent, LoadableComponent, T9nCom this.setEndDate(date); } } - } else { - this.setStartDate(date); } } this.calciteDatePickerChange.emit();