feat(date-picker, input-date-picker): add calendars property to support one month view in range

packages/calcite-components/src/components/date-picker-month/date-picker-month.scss

@@ -96,11 +96,11 @@
   border-color: var(--calcite-date-picker-range-calendar-divider-color, var(--calcite-color-border-1));
 }
 
-:host([range][layout="horizontal"]) .calendar--start {
+:host([range][layout="horizontal"][calendars="2"]) .calendar--start {
   border-inline-end-width: var(--calcite-border-width-sm);
 }
 
-:host([range][layout="vertical"]) .calendar--start {
+:host([range][layout="vertical"][calendars="2"]) .calendar--start {
   border-block-end-width: var(--calcite-border-width-sm);
 }
 

packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx

@@ -63,6 +63,9 @@ export class DatePickerMonth extends LitElement {
   /** The currently active Date. */
   @property() activeDate: Date = new Date();
 
+  /** Specifies the number of calendars displayed when `range` is `true`. */
+  @property({ type: Number, reflect: true }) calendars: 1 | 2 = 2;
+
   /**
    * The DateTimeFormat used to provide screen reader labels.
    *
@@ -605,7 +608,9 @@ export class DatePickerMonth extends LitElement {
     return (
       <div class={{ [CSS.calendarContainer]: true }} role="grid">
         {this.renderCalendar(adjustedWeekDays, days)}
-        {this.range && this.renderCalendar(adjustedWeekDays, nextMonthDays, true)}
+        {this.range &&
+          this.calendars === 2 &&
+          this.renderCalendar(adjustedWeekDays, nextMonthDays, true)}
       </div>
     );
   }
@@ -688,7 +693,7 @@ export class DatePickerMonth extends LitElement {
           min={this.min}
           monthStyle={this.monthStyle}
           oncalciteInternalDatePickerMonthHeaderSelectChange={this.monthHeaderSelectChange}
-          position={isEndCalendar ? "end" : this.range ? "start" : null}
+          position={isEndCalendar ? "end" : this.range && this.calendars === 2 ? "start" : null}
           scale={this.scale}
           selectedDate={this.selectedDate}
         />

packages/calcite-components/src/components/date-picker/date-picker.e2e.ts

@@ -26,6 +26,14 @@ describe("calcite-date-picker", () => {
         propertyName: "scale",
         defaultValue: "m",
       },
+      {
+        propertyName: "calendars",
+        defaultValue: 2,
+      },
+      {
+        propertyName: "monthStyle",
+        defaultValue: "wide",
+      },
     ]);
   });
 
@@ -102,7 +110,32 @@ describe("calcite-date-picker", () => {
       expect(eventSpy).toHaveReceivedEventTimes(2);
     });
 
-    it("Emits calciteDatePickerRangeChange event and updates value property when start and end dates are selected from end calendar", async () => {
+    it("emits calciteDatePickerRangeChange event and updates value property when start & end dates are selected from same month in range with one calendar", async () => {
+      const page = await newE2EPage();
+      await page.setContent(`<calcite-date-picker range calendars="1"></calcite-date-picker>`);
+      const datePicker = await page.find("calcite-date-picker");
+      const eventSpy = await page.spyOnEvent("calciteDatePickerRangeChange");
+      await page.waitForTimeout(animationDurationInMs);
+
+      const now = new Date();
+      const currentYear = now.getUTCFullYear();
+      const currentMonth = now.getUTCMonth() + 1;
+      const startDate = `${currentYear}-${formatTimePart(currentMonth)}-01`;
+      const endDate = `${currentYear}-${formatTimePart(currentMonth)}-15`;
+
+      await selectDayInMonthById(startDate.replaceAll("-", ""), page);
+      await page.waitForChanges();
+
+      expect(await datePicker.getProperty("value")).toEqual([startDate, ""]);
+
+      await selectDayInMonthById(endDate.replaceAll("-", ""), page);
+      await page.waitForChanges();
+
+      expect(await datePicker.getProperty("value")).toEqual([startDate, endDate]);
+      expect(eventSpy).toHaveReceivedEventTimes(2);
+    });
+
+    it("emits calciteDatePickerRangeChange event and updates value property when start and end dates are selected from end calendar", async () => {
       const page = await newE2EPage();
       await page.setContent("<calcite-date-picker range></calcite-date-picker>");
       const datePicker = await page.find("calcite-date-picker");
@@ -426,6 +459,53 @@ describe("calcite-date-picker", () => {
       expect(await datePicker.getProperty("value")).toEqual(["2023-11-25", "2024-02-01"]);
     });
 
+    it("should be able to navigate between months and select date using arrow keys & page keys when calendars is to set to one in range", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`<calcite-date-picker range calendars="1"></calcite-date-picker>`);
+      await page.waitForChanges();
+
+      const datePicker = await page.find("calcite-date-picker");
+      await setActiveDate(page, "01-01-2024");
+
+      await page.keyboard.press("Tab");
+      await page.waitForChanges();
+      await page.keyboard.press("Tab");
+      await page.waitForChanges();
+      await page.keyboard.press("Tab");
+      await page.waitForChanges();
+      await page.keyboard.press("Tab");
+      await page.waitForChanges();
+      await page.keyboard.press("Tab");
+      await page.waitForChanges();
+      await page.keyboard.press("ArrowUp");
+      await page.waitForChanges();
+      await page.keyboard.press("Enter");
+      await page.waitForChanges();
+
+      expect(await datePicker.getProperty("value")).toEqual(["2023-12-25", ""]);
+
+      await page.keyboard.press("PageUp");
+      await page.waitForChanges();
+      await page.keyboard.press("Enter");
+      await page.waitForChanges();
+      expect(await datePicker.getProperty("value")).toEqual(["2023-11-25", "2023-12-25"]);
+
+      await page.keyboard.press("PageDown");
+      await page.waitForChanges();
+      await page.keyboard.press("PageDown");
+      await page.waitForChanges();
+      await page.keyboard.press("Enter");
+      await page.waitForChanges();
+      expect(await datePicker.getProperty("value")).toEqual(["2023-11-25", "2024-01-25"]);
+
+      await page.keyboard.press("ArrowDown");
+      await page.waitForChanges();
+      await page.keyboard.press("Enter");
+      await page.waitForChanges();
+
+      expect(await datePicker.getProperty("value")).toEqual(["2023-11-25", "2024-02-01"]);
+    });
+
     it("should be able to navigate between months and select date using arrow keys and page keys in range when value is parsed", async () => {
       const page = await newE2EPage();
       await page.setContent(html`<calcite-date-picker range></calcite-date-picker>`);
@@ -470,6 +550,51 @@ describe("calcite-date-picker", () => {
 
       expect(await datePicker.getProperty("value")).toEqual(["2023-12-08", "2024-02-08"]);
     });
+
+    it("should be able to navigate between months and select date using arrow keys & page keys in range when value is parsed in range with one calendar", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`<calcite-date-picker range calendars="1"></calcite-date-picker>`);
+      const datePicker = await page.find("calcite-date-picker");
+      datePicker.setProperty("value", ["2024-01-01", "2024-02-10"]);
+
+      await page.keyboard.press("Tab");
+      await page.waitForChanges();
+      await page.keyboard.press("Tab");
+      await page.waitForChanges();
+      await page.keyboard.press("Tab");
+      await page.waitForChanges();
+      await page.keyboard.press("Tab");
+      await page.waitForChanges();
+      await page.keyboard.press("Tab");
+      await page.waitForChanges();
+      await page.keyboard.press("ArrowUp");
+      await page.waitForChanges();
+      await page.keyboard.press("Enter");
+      await page.waitForChanges();
+      expect(await datePicker.getProperty("value")).toEqual(["2023-12-25", "2024-02-10"]);
+
+      await page.keyboard.press("ArrowDown");
+      await page.waitForChanges();
+      await page.keyboard.press("ArrowDown");
+      await page.waitForChanges();
+      await page.keyboard.press("Enter");
+      await page.waitForChanges();
+      expect(await datePicker.getProperty("value")).toEqual(["2023-12-25", "2024-01-08"]);
+
+      await page.keyboard.press("PageUp");
+      await page.waitForChanges();
+      await page.keyboard.press("Enter");
+      await page.waitForChanges();
+      expect(await datePicker.getProperty("value")).toEqual(["2023-12-08", "2024-01-08"]);
+
+      await page.keyboard.press("PageDown");
+      await page.waitForChanges();
+      await page.keyboard.press("PageDown");
+      await page.waitForChanges();
+      await page.keyboard.press("Enter");
+      await page.waitForChanges();
+      expect(await datePicker.getProperty("value")).toEqual(["2023-12-08", "2024-02-08"]);
+    });
   });
 
   describe("hover range", () => {
@@ -602,6 +727,44 @@ describe("calcite-date-picker", () => {
   });
 
   describe("month & year selection", () => {
+    it("should allow selecting first and last valid month from select menu in range with one calendar", async () => {
+      const page = await newE2EPage();
+      await page.setContent(
+        html`<calcite-date-picker range min="2024-01-21" max="2024-10-21" calendars="1"></calcite-date-picker>`,
+      );
+
+      await setActiveDate(page, "07-01-2024");
+      await page.waitForChanges();
+
+      const monthSelect = await page.find(
+        `calcite-date-picker >>> calcite-date-picker-month-header >>> calcite-select.${MONTH_HEADER_CSS.monthPicker}`,
+      );
+      const yearInput = await page.find("calcite-date-picker >>> calcite-date-picker-month-header >>> input");
+      expect(await yearInput.getProperty("value")).toBe("2024");
+      expect(await monthSelect.getProperty("value")).toBe("July");
+
+      await monthSelect.click();
+      await page.waitForChanges();
+
+      await page.select(
+        `calcite-date-picker >>> calcite-date-picker-month-header >>> calcite-select.${MONTH_HEADER_CSS.monthPicker} >>> select`,
+        "January",
+      );
+      await page.waitForChanges();
+
+      expect(await monthSelect.getProperty("value")).toBe("January");
+      expect(await yearInput.getProperty("value")).toBe("2024");
+
+      await page.select(
+        `calcite-date-picker >>> calcite-date-picker-month-header >>> calcite-select.${MONTH_HEADER_CSS.monthPicker} >>> select`,
+        "October",
+      );
+      await page.waitForChanges();
+
+      expect(await monthSelect.getProperty("value")).toBe("October");
+      expect(await yearInput.getProperty("value")).toBe("2024");
+    });
+
     it("should allow selecting last valid month from month select menu in start calendar", async () => {
       const page = await newE2EPage();
       await page.setContent(html`<calcite-date-picker range max="2024-10-21"></calcite-date-picker>`);

packages/calcite-components/src/components/date-picker/date-picker.scss

@@ -44,7 +44,7 @@
   max-inline-size: 380px;
 }
 
-:host([scale="s"][range][layout="horizontal"]) {
+:host([scale="s"][range][layout="horizontal"][calendars="2"]) {
   inline-size: 480px;
   min-inline-size: 432px;
   max-inline-size: 772px;
@@ -56,7 +56,7 @@
   max-inline-size: 480px;
 }
 
-:host([scale="m"][range][layout="horizontal"]) {
+:host([scale="m"][layout="horizontal"][range][calendars="2"]) {
   inline-size: 608px;
   min-inline-size: 544px;
   max-inline-size: 972px;
@@ -68,7 +68,7 @@
   max-inline-size: 600px;
 }
 
-:host([scale="l"][range][layout="horizontal"]) {
+:host([scale="l"][layout="horizontal"][range][calendars="2"]) {
   inline-size: 684px;
   min-inline-size: 640px;
   max-inline-size: 1212px;

packages/calcite-components/src/components/date-picker/date-picker.stories.ts

@@ -71,6 +71,12 @@ export const range = (): string => html`
   </div>
 `;
 
+export const rangeOneCalendar = (): string => html`
+  <div style="width: 400px">
+    <calcite-date-picker lang="${defaultLocale}" min="2099-08-09" range scale="m" calendars="1"></calcite-date-picker>
+  </div>
+`;
+
 export const rangeHighlighted_TestOnly = (): string => html`
   <div style="width: 400px">
     <calcite-date-picker range></calcite-date-picker>
@@ -84,6 +90,19 @@ export const rangeHighlighted_TestOnly = (): string => html`
   </script>
 `;
 
+export const rangeOneCalendarWithValue = (): string => html`
+  <div style="width: 400px">
+    <calcite-date-picker range calendars="1"></calcite-date-picker>
+  </div>
+  <script>
+    (async () => {
+      await customElements.whenDefined("calcite-date-picker");
+      document.querySelector("calcite-date-picker").value = ["2020-02-14", "2020-02-28"];
+      await new Promise((resolve) => requestAnimationFrame(() => resolve()));
+    })();
+  </script>
+`;
+
 export const rangeValuesNotInSameMonthAndYear_TestOnly = (): string => html`
   <div style="width: 400px">
     <calcite-date-picker range></calcite-date-picker>
@@ -97,6 +116,19 @@ export const rangeValuesNotInSameMonthAndYear_TestOnly = (): string => html`
   </script>
 `;
 
+export const rangeOneCalendarValuesNotInSameMonthAndYear = (): string => html`
+  <div style="width: 400px">
+    <calcite-date-picker range calendars="1"></calcite-date-picker>
+  </div>
+  <script>
+    (async () => {
+      await customElements.whenDefined("calcite-date-picker");
+      document.querySelector("calcite-date-picker").value = ["2024-02-14", "2025-01-28"];
+      await new Promise((resolve) => requestAnimationFrame(() => resolve()));
+    })();
+  </script>
+`;
+
 export const Focus = (): string => html`
   <div style="width: 400px">
     <calcite-date-picker value="2020-01-01"></calcite-date-picker>

packages/calcite-components/src/components/date-picker/date-picker.tsx

@@ -92,6 +92,9 @@ export class DatePicker extends LitElement {
   /** When `range` is true, specifies the active `range`. Where `"start"` specifies the starting range date and `"end"` the ending range date. */
   @property({ reflect: true }) activeRange: "start" | "end";
 
+  /** Specifies the number of calendars displayed when `range` is `true`. */
+  @property({ type: Number, reflect: true }) calendars: 1 | 2 = 2;
+
   /** Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. */
   @property({ type: Number, reflect: true }) headingLevel: HeadingLevel;
 
@@ -335,7 +338,8 @@ export class DatePicker extends LitElement {
       const month = date.getMonth();
       const isDateOutOfCurrentRange =
         month !== this.activeStartDate.getMonth() &&
-        month !== nextMonth(this.activeStartDate).getMonth();
+        (this.calendars === 1 || month !== nextMonth(this.activeStartDate).getMonth());
+
       if (this.activeRange === "end") {
         if (!this.activeEndDate || (this.activeStartDate && isDateOutOfCurrentRange)) {
           this.activeEndDate = date;
@@ -662,6 +666,7 @@ export class DatePicker extends LitElement {
     return (
       <calcite-date-picker-month
         activeDate={activeDate}
+        calendars={this.calendars}
         dateTimeFormat={this.dateTimeFormat}
         endDate={this.range ? endDate : undefined}
         headingLevel={this.headingLevel || HEADING_LEVEL}