From 14212d0e5da2afe6af08371f92e54c165baa59c6 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Wed, 9 Jul 2025 17:27:53 -0500
Subject: [PATCH 01/22] feat(date-picker): add one month view in range

---
 .../date-picker-month-header.tsx              | 11 ++++++-
 .../date-picker-month/date-picker-month.tsx   | 18 ++++++++---
 .../components/date-picker/date-picker.scss   | 11 ++++---
 .../components/date-picker/date-picker.tsx    | 14 +++++++--
 .../src/components/date-picker/utils.ts       |  7 +++++
 .../input-date-picker/input-date-picker.tsx   | 30 +++++++++++++------
 6 files changed, 70 insertions(+), 21 deletions(-)

diff --git a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx
index c5c3308989a..b5c31ef5650 100644
--- a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx
+++ b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx
@@ -103,6 +103,15 @@ export class DatePickerMonthHeader extends LitElement {
    */
   @property() position: Extract<"start" | "end", Position>;
 
+  /** When `true`, activates the component's range mode. */
+  @property({
+    reflect: true,
+    // converter: {
+    //   fromAttribute: rangeFromAttribute,
+    // },
+  })
+  range: boolean | "single" = false;
+
   /** Specifies the size of the component. */
   @property({ reflect: true }) scale: Scale;
 
@@ -434,7 +443,7 @@ export class DatePickerMonthHeader extends LitElement {
           <div class={{ [CSS.chevronContainer]: true }}>{this.renderChevron("left")}</div>
         )}
         <div class={{ [CSS.chevronContainer]: true }}>
-          {this.position !== "start" && this.renderChevron("right")}
+          {(this.position !== "start" || this.range === "single") && this.renderChevron("right")}
         </div>
       </>
     );
diff --git a/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx b/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx
index 20e3882b4ad..76588390c8f 100644
--- a/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx
+++ b/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx
@@ -16,6 +16,7 @@ import { HeadingLevel } from "../functional/Heading";
 import type { DatePickerMonthHeader } from "../date-picker-month-header/date-picker-month-header";
 import type { DatePickerDay } from "../date-picker-day/date-picker-day";
 import type { DatePicker } from "../date-picker/date-picker";
+// import { rangeFromAttribute } from "../date-picker/utils";
 import { CSS } from "./resources";
 import { styles } from "./date-picker-month.scss";
 
@@ -110,7 +111,13 @@ export class DatePickerMonth extends LitElement {
   @property() monthStyle: "abbreviated" | "wide";
 
   /** When `true`, activates the component's range mode which renders two calendars for selecting ranges of dates. */
-  @property({ reflect: true }) range: boolean = false;
+  @property({
+    reflect: true,
+    // converter: {
+    //   fromAttribute: rangeFromAttribute,
+    // },
+  })
+  range: boolean | "single" = false;
 
   /** Specifies the size of the component. */
   @property({ reflect: true }) scale: Scale;
@@ -555,7 +562,7 @@ export class DatePickerMonth extends LitElement {
   private updateFocusableDate(date: Date): void {
     if (!this.selectedDate || !this.range) {
       this.focusedDate = this.getFirstValidDateOfMonth(date);
-    } else if (this.selectedDate && this.range) {
+    } else if (this.selectedDate && !!this.range) {
       if (!hasSameMonthAndYear(this.startDate, date) || !hasSameMonthAndYear(this.endDate, date)) {
         this.focusedDate = this.getFirstValidDateOfMonth(date);
       }
@@ -605,7 +612,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.range !== "single" &&
+          this.renderCalendar(adjustedWeekDays, nextMonthDays, true)}
       </div>
     );
   }
@@ -642,7 +651,7 @@ export class DatePickerMonth extends LitElement {
             [CSS.currentDay]: currentDay,
             [CSS.insideRangeHover]: this.isHoverInRange(),
             [CSS.outsideRangeHover]: !this.isHoverInRange(),
-            [CSS.noncurrent]: this.range && !currentMonth,
+            [CSS.noncurrent]: !!this.range && !currentMonth,
           }}
           currentMonth={currentMonth}
           dateTimeFormat={this.dateTimeFormat}
@@ -689,6 +698,7 @@ export class DatePickerMonth extends LitElement {
           monthStyle={this.monthStyle}
           oncalciteInternalDatePickerMonthHeaderSelectChange={this.monthHeaderSelectChange}
           position={isEndCalendar ? "end" : this.range ? "start" : null}
+          range={this.range}
           scale={this.scale}
           selectedDate={this.selectedDate}
         />
diff --git a/packages/calcite-components/src/components/date-picker/date-picker.scss b/packages/calcite-components/src/components/date-picker/date-picker.scss
index 1df52ecfc05..5b963f06baa 100644
--- a/packages/calcite-components/src/components/date-picker/date-picker.scss
+++ b/packages/calcite-components/src/components/date-picker/date-picker.scss
@@ -38,7 +38,8 @@
   border-radius: var(--calcite-date-picker-corner-radius, 0);
 }
 
-:host([scale="s"]) {
+:host([scale="s"]),
+:host([scale="s"][range="single"]) {
   inline-size: 236px;
   min-inline-size: 216px;
   max-inline-size: 380px;
@@ -50,19 +51,21 @@
   max-inline-size: 772px;
 }
 
-:host([scale="m"]) {
+:host([scale="m"]),
+:host([scale="m"][range="single"]) {
   inline-size: 298px;
   min-inline-size: 272px;
   max-inline-size: 480px;
 }
 
-:host([scale="m"][range][layout="horizontal"]) {
+:host([scale="m"][range][layout="horizontal"]:not([range="single"])) {
   inline-size: 608px;
   min-inline-size: 544px;
   max-inline-size: 972px;
 }
 
-:host([scale="l"]) {
+:host([scale="l"]),
+:host([scale="l"][range="single"]) {
   inline-size: 334px;
   min-inline-size: 320px;
   max-inline-size: 600px;
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 bf39aed48da..a2885fba092 100644
--- a/packages/calcite-components/src/components/date-picker/date-picker.tsx
+++ b/packages/calcite-components/src/components/date-picker/date-picker.tsx
@@ -9,6 +9,8 @@ import {
   method,
   state,
   JsxNode,
+  stringOrBoolean,
+  // stringOrBoolean,
 } from "@arcgis/lumina";
 import {
   dateFromISO,
@@ -29,7 +31,7 @@ import { focusFirstTabbable } from "../../utils/dom";
 import { useT9n } from "../../controllers/useT9n";
 import T9nStrings from "./assets/t9n/messages.en.json";
 import { DATE_PICKER_FORMAT_OPTIONS, HEADING_LEVEL, CSS } from "./resources";
-import { DateLocaleData, getLocaleData, getValueAsDateRange } from "./utils";
+import { DateLocaleData, getLocaleData, getValueAsDateRange, rangeFromAttribute } from "./utils";
 import { styles } from "./date-picker.scss";
 
 declare global {
@@ -128,7 +130,14 @@ export class DatePicker extends LitElement {
   @property({ reflect: true }) proximitySelectionDisabled = false;
 
   /** When `true`, activates the component's range mode to allow a start and end date. */
-  @property({ reflect: true }) range = false;
+  @property({
+    reflect: true,
+    converter: {
+      fromAttribute: rangeFromAttribute,
+      toAttribute: stringOrBoolean.toAttribute,
+    },
+  })
+  range: boolean | "single" = false;
 
   /** Specifies the size of the component. */
   @property({ reflect: true }) scale: "s" | "m" | "l" = "m";
@@ -622,7 +631,6 @@ export class DatePicker extends LitElement {
         : this.minAsDate;
 
     const startCalendarActiveDate = this.range ? this.activeStartDate : activeDate;
-
     return (
       <>
         <div ariaHidden={true} class={CSS.container} tabIndex={-1}>
diff --git a/packages/calcite-components/src/components/date-picker/utils.ts b/packages/calcite-components/src/components/date-picker/utils.ts
index 8fa6ffdc41c..5285f9d748a 100644
--- a/packages/calcite-components/src/components/date-picker/utils.ts
+++ b/packages/calcite-components/src/components/date-picker/utils.ts
@@ -82,3 +82,10 @@ export async function getLocaleData(lang: string): Promise<DateLocaleData> {
 export function getValueAsDateRange(value: string[]): Date[] {
   return value.map((v, index) => dateFromISO(v, index === 1));
 }
+
+export function rangeFromAttribute(value: string | boolean): boolean | "single" {
+  if (value === "single") {
+    return value;
+  }
+  return value === "" || value === "true";
+}
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
index 170a378112f..1c3c07bfd6d 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
@@ -58,7 +58,12 @@ import {
   numberStringFormatter,
 } from "../../utils/locale";
 import { toggleOpenClose, OpenCloseComponent } from "../../utils/openCloseComponent";
-import { DateLocaleData, getLocaleData, getValueAsDateRange } from "../date-picker/utils";
+import {
+  DateLocaleData,
+  getLocaleData,
+  getValueAsDateRange,
+  rangeFromAttribute,
+} from "../date-picker/utils";
 import { HeadingLevel } from "../functional/Heading";
 import { guid } from "../../utils/guid";
 import { Status } from "../interfaces";
@@ -272,7 +277,14 @@ export class InputDatePicker
   @property() proximitySelectionDisabled = false;
 
   /** When `true`, activates a range for the component. */
-  @property({ reflect: true }) range = false;
+  @property({
+    reflect: true,
+    converter: {
+      fromAttribute: rangeFromAttribute,
+      toAttribute: stringOrBoolean.toAttribute,
+    },
+  })
+  range: boolean | "single" = false;
 
   /**
    * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.
@@ -1097,8 +1109,8 @@ export class InputDatePicker
                 ariaInvalid={this.status === "invalid"}
                 class={{
                   [CSS.input]: true,
-                  [CSS.inputNoBottomBorder]: this.layout === "vertical" && this.range,
-                  [CSS.inputNoRightBorder]: this.range,
+                  [CSS.inputNoBottomBorder]: this.layout === "vertical" && !!this.range,
+                  [CSS.inputNoRightBorder]: !!this.range,
                 }}
                 disabled={disabled}
                 icon={ICONS.calendar}
@@ -1161,12 +1173,12 @@ export class InputDatePicker
                 />
               </div>
             </div>
-            {this.range && (
+            {!!this.range && (
               <div class={CSS.dividerContainer}>
                 <div class={CSS.divider} />
               </div>
             )}
-            {this.range && (
+            {!!this.range && (
               <div
                 class={CSS.inputWrapper}
                 data-position={POSITION.end}
@@ -1181,9 +1193,9 @@ export class InputDatePicker
                   ariaHasPopup="dialog"
                   class={{
                     [CSS.input]: true,
-                    [CSS.inputNoTopBorder]: this.layout === "vertical" && this.range,
-                    [CSS.inputNoLeftBorder]: this.layout === "horizontal" && this.range,
-                    [CSS.inputNoRightBorder]: this.layout === "vertical" && this.range,
+                    [CSS.inputNoTopBorder]: this.layout === "vertical" && !!this.range,
+                    [CSS.inputNoLeftBorder]: this.layout === "horizontal" && !!this.range,
+                    [CSS.inputNoRightBorder]: this.layout === "vertical" && !!this.range,
                   }}
                   disabled={disabled}
                   icon={ICONS.calendar}

From 423c967611dbe22d046a91f7698f78fc32d1ba71 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Fri, 11 Jul 2025 10:17:31 -0500
Subject: [PATCH 02/22] refactor

---
 .../src/components/date-picker/date-picker.tsx           | 9 +++++++--
 .../src/components/date-picker/utils.ts                  | 7 +++----
 .../components/input-date-picker/input-date-picker.tsx   | 4 ++--
 3 files changed, 12 insertions(+), 8 deletions(-)

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 a2885fba092..186e8c6179d 100644
--- a/packages/calcite-components/src/components/date-picker/date-picker.tsx
+++ b/packages/calcite-components/src/components/date-picker/date-picker.tsx
@@ -31,7 +31,12 @@ import { focusFirstTabbable } from "../../utils/dom";
 import { useT9n } from "../../controllers/useT9n";
 import T9nStrings from "./assets/t9n/messages.en.json";
 import { DATE_PICKER_FORMAT_OPTIONS, HEADING_LEVEL, CSS } from "./resources";
-import { DateLocaleData, getLocaleData, getValueAsDateRange, rangeFromAttribute } from "./utils";
+import {
+  DateLocaleData,
+  getLocaleData,
+  getValueAsDateRange,
+  stringOrBooleanFromAttribute,
+} from "./utils";
 import { styles } from "./date-picker.scss";
 
 declare global {
@@ -133,7 +138,7 @@ export class DatePicker extends LitElement {
   @property({
     reflect: true,
     converter: {
-      fromAttribute: rangeFromAttribute,
+      fromAttribute: stringOrBooleanFromAttribute,
       toAttribute: stringOrBoolean.toAttribute,
     },
   })
diff --git a/packages/calcite-components/src/components/date-picker/utils.ts b/packages/calcite-components/src/components/date-picker/utils.ts
index 5285f9d748a..20207cd29f0 100644
--- a/packages/calcite-components/src/components/date-picker/utils.ts
+++ b/packages/calcite-components/src/components/date-picker/utils.ts
@@ -83,9 +83,8 @@ export function getValueAsDateRange(value: string[]): Date[] {
   return value.map((v, index) => dateFromISO(v, index === 1));
 }
 
-export function rangeFromAttribute(value: string | boolean): boolean | "single" {
-  if (value === "single") {
-    return value;
+export function stringOrBooleanFromAttribute(value: string | boolean): string | boolean {
+  if (typeof value === "string") {
+    return value === "" ? true : value;
   }
-  return value === "" || value === "true";
 }
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
index 1c3c07bfd6d..6a79243a4cb 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
@@ -62,7 +62,7 @@ import {
   DateLocaleData,
   getLocaleData,
   getValueAsDateRange,
-  rangeFromAttribute,
+  stringOrBooleanFromAttribute,
 } from "../date-picker/utils";
 import { HeadingLevel } from "../functional/Heading";
 import { guid } from "../../utils/guid";
@@ -280,7 +280,7 @@ export class InputDatePicker
   @property({
     reflect: true,
     converter: {
-      fromAttribute: rangeFromAttribute,
+      fromAttribute: stringOrBooleanFromAttribute,
       toAttribute: stringOrBoolean.toAttribute,
     },
   })

From 1a98dec03a73d86c596f36cae8805b75f264383e Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Fri, 11 Jul 2025 10:58:20 -0500
Subject: [PATCH 03/22] remove commented code

---
 .../date-picker-month-header/date-picker-month-header.tsx     | 3 ---
 .../src/components/date-picker-month/date-picker-month.tsx    | 4 ----
 2 files changed, 7 deletions(-)

diff --git a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx
index b5c31ef5650..5f58a583463 100644
--- a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx
+++ b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx
@@ -106,9 +106,6 @@ export class DatePickerMonthHeader extends LitElement {
   /** When `true`, activates the component's range mode. */
   @property({
     reflect: true,
-    // converter: {
-    //   fromAttribute: rangeFromAttribute,
-    // },
   })
   range: boolean | "single" = false;
 
diff --git a/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx b/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx
index 76588390c8f..3dc8d918e02 100644
--- a/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx
+++ b/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx
@@ -16,7 +16,6 @@ import { HeadingLevel } from "../functional/Heading";
 import type { DatePickerMonthHeader } from "../date-picker-month-header/date-picker-month-header";
 import type { DatePickerDay } from "../date-picker-day/date-picker-day";
 import type { DatePicker } from "../date-picker/date-picker";
-// import { rangeFromAttribute } from "../date-picker/utils";
 import { CSS } from "./resources";
 import { styles } from "./date-picker-month.scss";
 
@@ -113,9 +112,6 @@ export class DatePickerMonth extends LitElement {
   /** When `true`, activates the component's range mode which renders two calendars for selecting ranges of dates. */
   @property({
     reflect: true,
-    // converter: {
-    //   fromAttribute: rangeFromAttribute,
-    // },
   })
   range: boolean | "single" = false;
 

From a3b311399943930be4bd24e6d032016c7cbdeb91 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Thu, 24 Jul 2025 12:18:47 -0500
Subject: [PATCH 04/22] add calendars property

---
 .../date-picker-month-header.tsx              |  4 ++--
 .../date-picker-month/date-picker-month.scss  |  4 ++--
 .../date-picker-month/date-picker-month.tsx   | 13 ++++++-----
 .../components/date-picker/date-picker.scss   | 12 +++++-----
 .../components/date-picker/date-picker.tsx    | 22 +++++--------------
 .../input-date-picker/input-date-picker.tsx   | 17 +++++---------
 6 files changed, 30 insertions(+), 42 deletions(-)

diff --git a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx
index 5f58a583463..a7632046a91 100644
--- a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx
+++ b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx
@@ -107,7 +107,7 @@ export class DatePickerMonthHeader extends LitElement {
   @property({
     reflect: true,
   })
-  range: boolean | "single" = false;
+  range = false;
 
   /** Specifies the size of the component. */
   @property({ reflect: true }) scale: Scale;
@@ -440,7 +440,7 @@ export class DatePickerMonthHeader extends LitElement {
           <div class={{ [CSS.chevronContainer]: true }}>{this.renderChevron("left")}</div>
         )}
         <div class={{ [CSS.chevronContainer]: true }}>
-          {(this.position !== "start" || this.range === "single") && this.renderChevron("right")}
+          {this.position !== "start" && this.renderChevron("right")}
         </div>
       </>
     );
diff --git a/packages/calcite-components/src/components/date-picker-month/date-picker-month.scss b/packages/calcite-components/src/components/date-picker-month/date-picker-month.scss
index 5c3112f38cf..4c547317ec0 100644
--- a/packages/calcite-components/src/components/date-picker-month/date-picker-month.scss
+++ b/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="two"]) .calendar--start {
   border-inline-end-width: var(--calcite-border-width-sm);
 }
 
-:host([range][layout="vertical"]) .calendar--start {
+:host([range][layout="vertical"][calendars="two"]) .calendar--start {
   border-block-end-width: var(--calcite-border-width-sm);
 }
 
diff --git a/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx b/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx
index 3dc8d918e02..5fedd015159 100644
--- a/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx
+++ b/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({ reflect: true }) calendars: "one" | "two" = "two";
+
   /**
    * The DateTimeFormat used to provide screen reader labels.
    *
@@ -113,7 +116,7 @@ export class DatePickerMonth extends LitElement {
   @property({
     reflect: true,
   })
-  range: boolean | "single" = false;
+  range = false;
 
   /** Specifies the size of the component. */
   @property({ reflect: true }) scale: Scale;
@@ -558,7 +561,7 @@ export class DatePickerMonth extends LitElement {
   private updateFocusableDate(date: Date): void {
     if (!this.selectedDate || !this.range) {
       this.focusedDate = this.getFirstValidDateOfMonth(date);
-    } else if (this.selectedDate && !!this.range) {
+    } else if (this.selectedDate && this.range) {
       if (!hasSameMonthAndYear(this.startDate, date) || !hasSameMonthAndYear(this.endDate, date)) {
         this.focusedDate = this.getFirstValidDateOfMonth(date);
       }
@@ -609,7 +612,7 @@ export class DatePickerMonth extends LitElement {
       <div class={{ [CSS.calendarContainer]: true }} role="grid">
         {this.renderCalendar(adjustedWeekDays, days)}
         {this.range &&
-          this.range !== "single" &&
+          this.calendars === "two" &&
           this.renderCalendar(adjustedWeekDays, nextMonthDays, true)}
       </div>
     );
@@ -647,7 +650,7 @@ export class DatePickerMonth extends LitElement {
             [CSS.currentDay]: currentDay,
             [CSS.insideRangeHover]: this.isHoverInRange(),
             [CSS.outsideRangeHover]: !this.isHoverInRange(),
-            [CSS.noncurrent]: !!this.range && !currentMonth,
+            [CSS.noncurrent]: this.range && !currentMonth,
           }}
           currentMonth={currentMonth}
           dateTimeFormat={this.dateTimeFormat}
@@ -693,7 +696,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 === "two" ? "start" : null}
           range={this.range}
           scale={this.scale}
           selectedDate={this.selectedDate}
diff --git a/packages/calcite-components/src/components/date-picker/date-picker.scss b/packages/calcite-components/src/components/date-picker/date-picker.scss
index 5b963f06baa..1e227d946af 100644
--- a/packages/calcite-components/src/components/date-picker/date-picker.scss
+++ b/packages/calcite-components/src/components/date-picker/date-picker.scss
@@ -39,39 +39,39 @@
 }
 
 :host([scale="s"]),
-:host([scale="s"][range="single"]) {
+:host([scale="s"][range][calendars="one"]) {
   inline-size: 236px;
   min-inline-size: 216px;
   max-inline-size: 380px;
 }
 
-:host([scale="s"][range][layout="horizontal"]) {
+:host([scale="s"][range][layout="horizontal"][calendars="two"]) {
   inline-size: 480px;
   min-inline-size: 432px;
   max-inline-size: 772px;
 }
 
 :host([scale="m"]),
-:host([scale="m"][range="single"]) {
+:host([scale="m"][range][calendars="one"]) {
   inline-size: 298px;
   min-inline-size: 272px;
   max-inline-size: 480px;
 }
 
-:host([scale="m"][range][layout="horizontal"]:not([range="single"])) {
+:host([scale="m"][layout="horizontal"][range][calendars="two"]) {
   inline-size: 608px;
   min-inline-size: 544px;
   max-inline-size: 972px;
 }
 
 :host([scale="l"]),
-:host([scale="l"][range="single"]) {
+:host([scale="l"][range][calendars="one"]) {
   inline-size: 334px;
   min-inline-size: 320px;
   max-inline-size: 600px;
 }
 
-:host([scale="l"][range][layout="horizontal"]) {
+:host([scale="l"][layout="horizontal"][range][calendars="two"]) {
   inline-size: 684px;
   min-inline-size: 640px;
   max-inline-size: 1212px;
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 446da6c3924..c00ed569fcd 100644
--- a/packages/calcite-components/src/components/date-picker/date-picker.tsx
+++ b/packages/calcite-components/src/components/date-picker/date-picker.tsx
@@ -9,8 +9,6 @@ import {
   method,
   state,
   JsxNode,
-  stringOrBoolean,
-  // stringOrBoolean,
 } from "@arcgis/lumina";
 import {
   dateFromISO,
@@ -30,12 +28,7 @@ import { useT9n } from "../../controllers/useT9n";
 import { useSetFocus } from "../../controllers/useSetFocus";
 import T9nStrings from "./assets/t9n/messages.en.json";
 import { DATE_PICKER_FORMAT_OPTIONS, HEADING_LEVEL, CSS } from "./resources";
-import {
-  DateLocaleData,
-  getLocaleData,
-  getValueAsDateRange,
-  stringOrBooleanFromAttribute,
-} from "./utils";
+import { DateLocaleData, getLocaleData, getValueAsDateRange } from "./utils";
 import { styles } from "./date-picker.scss";
 
 declare global {
@@ -99,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({ reflect: true }) calendars: "one" | "two" = "two";
+
   /** Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. */
   @property({ type: Number, reflect: true }) headingLevel: HeadingLevel;
 
@@ -136,14 +132,7 @@ export class DatePicker extends LitElement {
   @property({ reflect: true }) proximitySelectionDisabled = false;
 
   /** When `true`, activates the component's range mode to allow a start and end date. */
-  @property({
-    reflect: true,
-    converter: {
-      fromAttribute: stringOrBooleanFromAttribute,
-      toAttribute: stringOrBoolean.toAttribute,
-    },
-  })
-  range: boolean | "single" = false;
+  @property({ reflect: true }) range = false;
 
   /** Specifies the size of the component. */
   @property({ reflect: true }) scale: "s" | "m" | "l" = "m";
@@ -672,6 +661,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}
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
index ca7400e1c30..6e8d3fd74fd 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
@@ -57,12 +57,7 @@ import {
   numberStringFormatter,
 } from "../../utils/locale";
 import { toggleOpenClose, OpenCloseComponent } from "../../utils/openCloseComponent";
-import {
-  DateLocaleData,
-  getLocaleData,
-  getValueAsDateRange,
-  stringOrBooleanFromAttribute,
-} from "../date-picker/utils";
+import { DateLocaleData, getLocaleData, getValueAsDateRange } from "../date-picker/utils";
 import { HeadingLevel } from "../functional/Heading";
 import { guid } from "../../utils/guid";
 import { Status } from "../interfaces";
@@ -194,6 +189,9 @@ export class InputDatePicker
 
   //#region Public Properties
 
+  /** Specifies the number of calendars displayed when `range` is `true`. */
+  @property({ reflect: true }) calendars: "one" | "two" = "two";
+
   /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
   @property({ reflect: true }) disabled = false;
 
@@ -281,12 +279,8 @@ export class InputDatePicker
   /** When `true`, activates a range for the component. */
   @property({
     reflect: true,
-    converter: {
-      fromAttribute: stringOrBooleanFromAttribute,
-      toAttribute: stringOrBoolean.toAttribute,
-    },
   })
-  range: boolean | "single" = false;
+  range = false;
 
   /**
    * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.
@@ -1162,6 +1156,7 @@ export class InputDatePicker
                 <calcite-date-picker
                   activeDate={this.datePickerActiveDate}
                   activeRange={this.focusedInput}
+                  calendars={this.calendars}
                   headingLevel={this.headingLevel}
                   layout={this.layout}
                   max={this.max}

From 6162684e0c1f36880fc66fb634683800e2275ca4 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Thu, 24 Jul 2025 12:51:04 -0500
Subject: [PATCH 05/22] refactor

---
 .../date-picker-month-header.tsx              |  5 +----
 .../date-picker-month/date-picker-month.tsx   |  5 +----
 .../input-date-picker/input-date-picker.tsx   | 19 ++++++++-----------
 3 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx
index a7632046a91..3f92001157e 100644
--- a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx
+++ b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx
@@ -104,10 +104,7 @@ export class DatePickerMonthHeader extends LitElement {
   @property() position: Extract<"start" | "end", Position>;
 
   /** When `true`, activates the component's range mode. */
-  @property({
-    reflect: true,
-  })
-  range = false;
+  @property({ reflect: true }) range = false;
 
   /** Specifies the size of the component. */
   @property({ reflect: true }) scale: Scale;
diff --git a/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx b/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx
index 5fedd015159..daa25faa8aa 100644
--- a/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx
+++ b/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx
@@ -113,10 +113,7 @@ export class DatePickerMonth extends LitElement {
   @property() monthStyle: "abbreviated" | "wide";
 
   /** When `true`, activates the component's range mode which renders two calendars for selecting ranges of dates. */
-  @property({
-    reflect: true,
-  })
-  range = false;
+  @property({ reflect: true }) range = false;
 
   /** Specifies the size of the component. */
   @property({ reflect: true }) scale: Scale;
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
index 6e8d3fd74fd..5ee56972291 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
@@ -277,10 +277,7 @@ export class InputDatePicker
   @property() proximitySelectionDisabled = false;
 
   /** When `true`, activates a range for the component. */
-  @property({
-    reflect: true,
-  })
-  range = false;
+  @property({ reflect: true }) range = false;
 
   /**
    * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.
@@ -1112,8 +1109,8 @@ export class InputDatePicker
                 ariaInvalid={this.status === "invalid"}
                 class={{
                   [CSS.input]: true,
-                  [CSS.inputNoBottomBorder]: this.layout === "vertical" && !!this.range,
-                  [CSS.inputNoRightBorder]: !!this.range,
+                  [CSS.inputNoBottomBorder]: this.layout === "vertical" && this.range,
+                  [CSS.inputNoRightBorder]: this.range,
                 }}
                 disabled={disabled}
                 icon={ICONS.calendar}
@@ -1177,12 +1174,12 @@ export class InputDatePicker
                 />
               </div>
             </div>
-            {!!this.range && (
+            {this.range && (
               <div class={CSS.dividerContainer}>
                 <div class={CSS.divider} />
               </div>
             )}
-            {!!this.range && (
+            {this.range && (
               <div
                 class={CSS.inputWrapper}
                 data-position={POSITION.end}
@@ -1197,9 +1194,9 @@ export class InputDatePicker
                   ariaHasPopup="dialog"
                   class={{
                     [CSS.input]: true,
-                    [CSS.inputNoTopBorder]: this.layout === "vertical" && !!this.range,
-                    [CSS.inputNoLeftBorder]: this.layout === "horizontal" && !!this.range,
-                    [CSS.inputNoRightBorder]: this.layout === "vertical" && !!this.range,
+                    [CSS.inputNoTopBorder]: this.layout === "vertical" && this.range,
+                    [CSS.inputNoLeftBorder]: this.layout === "horizontal" && this.range,
+                    [CSS.inputNoRightBorder]: this.layout === "vertical" && this.range,
                   }}
                   disabled={disabled}
                   icon={ICONS.calendar}

From 5720afbdf905e8d095f46fed55aed853e14b16ba Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Thu, 24 Jul 2025 12:53:04 -0500
Subject: [PATCH 06/22] remove unused props

---
 .../date-picker-month-header/date-picker-month-header.tsx      | 3 ---
 .../src/components/date-picker-month/date-picker-month.tsx     | 3 +--
 .../src/components/date-picker/date-picker.tsx                 | 1 +
 3 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx
index 3f92001157e..c5c3308989a 100644
--- a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx
+++ b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx
@@ -103,9 +103,6 @@ export class DatePickerMonthHeader extends LitElement {
    */
   @property() position: Extract<"start" | "end", Position>;
 
-  /** When `true`, activates the component's range mode. */
-  @property({ reflect: true }) range = false;
-
   /** Specifies the size of the component. */
   @property({ reflect: true }) scale: Scale;
 
diff --git a/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx b/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx
index daa25faa8aa..88f51c6e4e7 100644
--- a/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx
+++ b/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx
@@ -113,7 +113,7 @@ export class DatePickerMonth extends LitElement {
   @property() monthStyle: "abbreviated" | "wide";
 
   /** When `true`, activates the component's range mode which renders two calendars for selecting ranges of dates. */
-  @property({ reflect: true }) range = false;
+  @property({ reflect: true }) range: boolean = false;
 
   /** Specifies the size of the component. */
   @property({ reflect: true }) scale: Scale;
@@ -694,7 +694,6 @@ export class DatePickerMonth extends LitElement {
           monthStyle={this.monthStyle}
           oncalciteInternalDatePickerMonthHeaderSelectChange={this.monthHeaderSelectChange}
           position={isEndCalendar ? "end" : this.range && this.calendars === "two" ? "start" : null}
-          range={this.range}
           scale={this.scale}
           selectedDate={this.selectedDate}
         />
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 c00ed569fcd..a3eaeeb89a9 100644
--- a/packages/calcite-components/src/components/date-picker/date-picker.tsx
+++ b/packages/calcite-components/src/components/date-picker/date-picker.tsx
@@ -633,6 +633,7 @@ export class DatePicker extends LitElement {
         : this.minAsDate;
 
     const startCalendarActiveDate = this.range ? this.activeStartDate : activeDate;
+
     return (
       <>
         <div ariaHidden={true} class={CSS.container} tabIndex={-1}>

From aec851cbcde0b5e9f44dae64c057b869b595e663 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Mon, 28 Jul 2025 18:07:50 -0500
Subject: [PATCH 07/22] add tests

---
 .../components/date-picker/date-picker.e2e.ts | 168 +++++++++++++++++-
 .../components/date-picker/date-picker.tsx    |   3 +-
 2 files changed, 169 insertions(+), 2 deletions(-)

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 8e216ecf033..b5866f141b3 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
@@ -26,6 +26,14 @@ describe("calcite-date-picker", () => {
         propertyName: "scale",
         defaultValue: "m",
       },
+      {
+        propertyName: "calendars",
+        defaultValue: "two",
+      },
+      {
+        propertyName: "monthStyle",
+        defaultValue: "wide",
+      },
     ]);
   });
 
@@ -102,7 +110,33 @@ 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="one"></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 +460,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="one"></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 +551,53 @@ 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="one"></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 +730,44 @@ describe("calcite-date-picker", () => {
   });
 
   describe("month & year selection", () => {
+    it("should allow selecting first and last valid month from select menu when calendars is set to one in range", async () => {
+      const page = await newE2EPage();
+      await page.setContent(
+        html`<calcite-date-picker range min="2024-01-21" max="2024-10-21" calendars="one"></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>`);
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 a3eaeeb89a9..b982c7e93f6 100644
--- a/packages/calcite-components/src/components/date-picker/date-picker.tsx
+++ b/packages/calcite-components/src/components/date-picker/date-picker.tsx
@@ -338,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 === "one" || month !== nextMonth(this.activeStartDate).getMonth());
+
       if (this.activeRange === "end") {
         if (!this.activeEndDate || (this.activeStartDate && isDateOutOfCurrentRange)) {
           this.activeEndDate = date;

From 416d42f3e9f325f28c8159001ce4dc7a453e1e26 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Tue, 29 Jul 2025 12:41:44 -0500
Subject: [PATCH 08/22] Add stories

---
 .../date-picker/date-picker.stories.ts        | 40 +++++++++++++++----
 1 file changed, 33 insertions(+), 7 deletions(-)

diff --git a/packages/calcite-components/src/components/date-picker/date-picker.stories.ts b/packages/calcite-components/src/components/date-picker/date-picker.stories.ts
index 6bfe0e83cb9..4c38d006811 100644
--- a/packages/calcite-components/src/components/date-picker/date-picker.stories.ts
+++ b/packages/calcite-components/src/components/date-picker/date-picker.stories.ts
@@ -61,13 +61,13 @@ export const simple = (args: DatePickerStoryArgs): string => html`
 
 export const range = (): string => html`
   <div style="width: 400px">
-    <calcite-date-picker
-      lang="${defaultLocale}"
-      min="2016-08-09"
-      range
-      scale="m"
-      value="2020-02-28"
-    ></calcite-date-picker>
+    <calcite-date-picker lang="${defaultLocale}" min="2016-08-09" range scale="m"></calcite-date-picker>
+  </div>
+`;
+
+export const rangeOneCalendar = (): string => html`
+  <div style="width: 400px">
+    <calcite-date-picker lang="${defaultLocale}" min="2016-08-09" range scale="m" calendars="one"></calcite-date-picker>
   </div>
 `;
 
@@ -84,6 +84,19 @@ export const rangeHighlighted_TestOnly = (): string => html`
   </script>
 `;
 
+export const rangeOneCalendarWithValue = (): string => html`
+  <div style="width: 400px">
+    <calcite-date-picker range calendars="one"></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 +110,19 @@ export const rangeValuesNotInSameMonthAndYear_TestOnly = (): string => html`
   </script>
 `;
 
+export const rangeOneCalendarValuesNotInSameMonthAndYear = (): string => html`
+  <div style="width: 400px">
+    <calcite-date-picker range calendars="one"></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>

From fb17cec882fed560685c79253ef5b1933c60f2a1 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Wed, 6 Aug 2025 09:36:35 -0500
Subject: [PATCH 09/22] change calendars type to number

---
 .../date-picker-month/date-picker-month.scss         |  4 ++--
 .../date-picker-month/date-picker-month.tsx          |  6 +++---
 .../src/components/date-picker/date-picker.e2e.ts    | 10 +++++-----
 .../src/components/date-picker/date-picker.scss      | 12 ++++++------
 .../components/date-picker/date-picker.stories.ts    |  6 +++---
 .../src/components/date-picker/date-picker.tsx       |  4 ++--
 .../input-date-picker/input-date-picker.e2e.ts       |  4 ++++
 .../input-date-picker/input-date-picker.tsx          |  2 +-
 .../calcite-components/src/demos/date-picker.html    | 10 +++++-----
 9 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/packages/calcite-components/src/components/date-picker-month/date-picker-month.scss b/packages/calcite-components/src/components/date-picker-month/date-picker-month.scss
index 4c547317ec0..70a616b1661 100644
--- a/packages/calcite-components/src/components/date-picker-month/date-picker-month.scss
+++ b/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"][calendars="two"]) .calendar--start {
+:host([range][layout="horizontal"][calendars="2"]) .calendar--start {
   border-inline-end-width: var(--calcite-border-width-sm);
 }
 
-:host([range][layout="vertical"][calendars="two"]) .calendar--start {
+:host([range][layout="vertical"][calendars="2"]) .calendar--start {
   border-block-end-width: var(--calcite-border-width-sm);
 }
 
diff --git a/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx b/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx
index 88f51c6e4e7..9a9894d6024 100644
--- a/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx
+++ b/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx
@@ -64,7 +64,7 @@ export class DatePickerMonth extends LitElement {
   @property() activeDate: Date = new Date();
 
   /** Specifies the number of calendars displayed when `range` is `true`. */
-  @property({ reflect: true }) calendars: "one" | "two" = "two";
+  @property({ type: Number, reflect: true }) calendars: 1 | 2 = 2;
 
   /**
    * The DateTimeFormat used to provide screen reader labels.
@@ -609,7 +609,7 @@ export class DatePickerMonth extends LitElement {
       <div class={{ [CSS.calendarContainer]: true }} role="grid">
         {this.renderCalendar(adjustedWeekDays, days)}
         {this.range &&
-          this.calendars === "two" &&
+          this.calendars === 2 &&
           this.renderCalendar(adjustedWeekDays, nextMonthDays, true)}
       </div>
     );
@@ -693,7 +693,7 @@ export class DatePickerMonth extends LitElement {
           min={this.min}
           monthStyle={this.monthStyle}
           oncalciteInternalDatePickerMonthHeaderSelectChange={this.monthHeaderSelectChange}
-          position={isEndCalendar ? "end" : this.range && this.calendars === "two" ? "start" : null}
+          position={isEndCalendar ? "end" : this.range && this.calendars === 2 ? "start" : null}
           scale={this.scale}
           selectedDate={this.selectedDate}
         />
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 b5866f141b3..0a86e560236 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
@@ -28,7 +28,7 @@ describe("calcite-date-picker", () => {
       },
       {
         propertyName: "calendars",
-        defaultValue: "two",
+        defaultValue: 2,
       },
       {
         propertyName: "monthStyle",
@@ -112,7 +112,7 @@ describe("calcite-date-picker", () => {
 
     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="one"></calcite-date-picker>`);
+      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");
 
@@ -462,7 +462,7 @@ describe("calcite-date-picker", () => {
 
     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="one"></calcite-date-picker>`);
+      await page.setContent(html`<calcite-date-picker range calendars="1"></calcite-date-picker>`);
       await page.waitForChanges();
 
       const datePicker = await page.find("calcite-date-picker");
@@ -554,7 +554,7 @@ describe("calcite-date-picker", () => {
 
     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="one"></calcite-date-picker>`);
+      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"]);
 
@@ -733,7 +733,7 @@ describe("calcite-date-picker", () => {
     it("should allow selecting first and last valid month from select menu when calendars is set to one in range", async () => {
       const page = await newE2EPage();
       await page.setContent(
-        html`<calcite-date-picker range min="2024-01-21" max="2024-10-21" calendars="one"></calcite-date-picker>`,
+        html`<calcite-date-picker range min="2024-01-21" max="2024-10-21" calendars="1"></calcite-date-picker>`,
       );
 
       await setActiveDate(page, "07-01-2024");
diff --git a/packages/calcite-components/src/components/date-picker/date-picker.scss b/packages/calcite-components/src/components/date-picker/date-picker.scss
index 1e227d946af..a76b47daf5b 100644
--- a/packages/calcite-components/src/components/date-picker/date-picker.scss
+++ b/packages/calcite-components/src/components/date-picker/date-picker.scss
@@ -39,39 +39,39 @@
 }
 
 :host([scale="s"]),
-:host([scale="s"][range][calendars="one"]) {
+:host([scale="s"][range][calendars="1"]) {
   inline-size: 236px;
   min-inline-size: 216px;
   max-inline-size: 380px;
 }
 
-:host([scale="s"][range][layout="horizontal"][calendars="two"]) {
+:host([scale="s"][range][layout="horizontal"][calendars="2"]) {
   inline-size: 480px;
   min-inline-size: 432px;
   max-inline-size: 772px;
 }
 
 :host([scale="m"]),
-:host([scale="m"][range][calendars="one"]) {
+:host([scale="m"][range][calendars="1"]) {
   inline-size: 298px;
   min-inline-size: 272px;
   max-inline-size: 480px;
 }
 
-:host([scale="m"][layout="horizontal"][range][calendars="two"]) {
+:host([scale="m"][layout="horizontal"][range][calendars="2"]) {
   inline-size: 608px;
   min-inline-size: 544px;
   max-inline-size: 972px;
 }
 
 :host([scale="l"]),
-:host([scale="l"][range][calendars="one"]) {
+:host([scale="l"][range][calendars="1"]) {
   inline-size: 334px;
   min-inline-size: 320px;
   max-inline-size: 600px;
 }
 
-:host([scale="l"][layout="horizontal"][range][calendars="two"]) {
+:host([scale="l"][layout="horizontal"][range][calendars="2"]) {
   inline-size: 684px;
   min-inline-size: 640px;
   max-inline-size: 1212px;
diff --git a/packages/calcite-components/src/components/date-picker/date-picker.stories.ts b/packages/calcite-components/src/components/date-picker/date-picker.stories.ts
index 4c38d006811..c65e4af6dcf 100644
--- a/packages/calcite-components/src/components/date-picker/date-picker.stories.ts
+++ b/packages/calcite-components/src/components/date-picker/date-picker.stories.ts
@@ -67,7 +67,7 @@ export const range = (): string => html`
 
 export const rangeOneCalendar = (): string => html`
   <div style="width: 400px">
-    <calcite-date-picker lang="${defaultLocale}" min="2016-08-09" range scale="m" calendars="one"></calcite-date-picker>
+    <calcite-date-picker lang="${defaultLocale}" min="2016-08-09" range scale="m" calendars="1"></calcite-date-picker>
   </div>
 `;
 
@@ -86,7 +86,7 @@ export const rangeHighlighted_TestOnly = (): string => html`
 
 export const rangeOneCalendarWithValue = (): string => html`
   <div style="width: 400px">
-    <calcite-date-picker range calendars="one"></calcite-date-picker>
+    <calcite-date-picker range calendars="1"></calcite-date-picker>
   </div>
   <script>
     (async () => {
@@ -112,7 +112,7 @@ export const rangeValuesNotInSameMonthAndYear_TestOnly = (): string => html`
 
 export const rangeOneCalendarValuesNotInSameMonthAndYear = (): string => html`
   <div style="width: 400px">
-    <calcite-date-picker range calendars="one"></calcite-date-picker>
+    <calcite-date-picker range calendars="1"></calcite-date-picker>
   </div>
   <script>
     (async () => {
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 b982c7e93f6..ef4ba5f7faa 100644
--- a/packages/calcite-components/src/components/date-picker/date-picker.tsx
+++ b/packages/calcite-components/src/components/date-picker/date-picker.tsx
@@ -93,7 +93,7 @@ export class DatePicker extends LitElement {
   @property({ reflect: true }) activeRange: "start" | "end";
 
   /** Specifies the number of calendars displayed when `range` is `true`. */
-  @property({ reflect: true }) calendars: "one" | "two" = "two";
+  @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;
@@ -338,7 +338,7 @@ export class DatePicker extends LitElement {
       const month = date.getMonth();
       const isDateOutOfCurrentRange =
         month !== this.activeStartDate.getMonth() &&
-        (this.calendars === "one" || month !== nextMonth(this.activeStartDate).getMonth());
+        (this.calendars === 1 || month !== nextMonth(this.activeStartDate).getMonth());
 
       if (this.activeRange === "end") {
         if (!this.activeEndDate || (this.activeStartDate && isDateOutOfCurrentRange)) {
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts
index b718cbeb200..84e05ab780c 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts
@@ -58,6 +58,10 @@ describe("calcite-input-date-picker", () => {
         propertyName: "validationMessage",
         defaultValue: undefined,
       },
+      {
+        propertyName: "calendars",
+        defaultValue: 2,
+      },
     ]);
   });
 
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
index 5ee56972291..b1091c35a9c 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
@@ -190,7 +190,7 @@ export class InputDatePicker
   //#region Public Properties
 
   /** Specifies the number of calendars displayed when `range` is `true`. */
-  @property({ reflect: true }) calendars: "one" | "two" = "two";
+  @property({ type: Number, reflect: true }) calendars: 1 | 2 = 2;
 
   /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
   @property({ reflect: true }) disabled = false;
diff --git a/packages/calcite-components/src/demos/date-picker.html b/packages/calcite-components/src/demos/date-picker.html
index 1120056faa6..8f1675bca1f 100644
--- a/packages/calcite-components/src/demos/date-picker.html
+++ b/packages/calcite-components/src/demos/date-picker.html
@@ -178,20 +178,20 @@ <h1 style="margin: 0 auto; text-align: center">Date-picker</h1>
         </div>
       </div>
 
-      <!-- Date Range always open -->
+      <!-- Date Range + calendars="1" -->
       <div class="parent">
-        <div class="child right-aligned-text">Date Range always open</div>
+        <div class="child right-aligned-text">Date Range + calendars="1"</div>
 
         <div class="child">
-          <calcite-date-picker scale="s" range active></calcite-date-picker>
+          <calcite-date-picker scale="s" range calendars="1"></calcite-date-picker>
         </div>
 
         <div class="child">
-          <calcite-date-picker scale="m" range active></calcite-date-picker>
+          <calcite-date-picker scale="m" range calendars="1"></calcite-date-picker>
         </div>
 
         <div class="child">
-          <calcite-date-picker scale="l" range active></calcite-date-picker>
+          <calcite-date-picker scale="l" range calendars="1"></calcite-date-picker>
         </div>
       </div>
 

From 4f9e4108646776a999a78019baaa9edf4763b4df Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Wed, 6 Aug 2025 16:59:40 -0500
Subject: [PATCH 10/22] add more tests

---
 .../src/components/date-picker/utils.ts       |   6 -
 .../input-date-picker.e2e.ts                  | 197 +++++++++++++++++-
 .../input-date-picker.stories.ts              |  32 +++
 3 files changed, 227 insertions(+), 8 deletions(-)

diff --git a/packages/calcite-components/src/components/date-picker/utils.ts b/packages/calcite-components/src/components/date-picker/utils.ts
index 20207cd29f0..8fa6ffdc41c 100644
--- a/packages/calcite-components/src/components/date-picker/utils.ts
+++ b/packages/calcite-components/src/components/date-picker/utils.ts
@@ -82,9 +82,3 @@ export async function getLocaleData(lang: string): Promise<DateLocaleData> {
 export function getValueAsDateRange(value: string[]): Date[] {
   return value.map((v, index) => dateFromISO(v, index === 1));
 }
-
-export function stringOrBooleanFromAttribute(value: string | boolean): string | boolean {
-  if (typeof value === "string") {
-    return value === "" ? true : value;
-  }
-}
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts
index 84e05ab780c..bc9a46c7520 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts
@@ -1344,6 +1344,30 @@ describe("calcite-input-date-picker", () => {
       expect(await inputDatePicker.getProperty("value")).not.toBeNull();
     });
 
+    it("should keep date-picker open when user selects dates in range with one calendar", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`<calcite-input-date-picker range calendars="1"></calcite-input-date-picker>`);
+      await skipAnimations(page);
+      await page.waitForChanges();
+
+      const inputDatePicker = await page.find("calcite-input-date-picker");
+      const startDatePicker = await page.find("calcite-input-date-picker >>> calcite-input-text");
+      expect(await isCalendarVisible(page)).toBe(false);
+
+      await startDatePicker.click();
+      await page.waitForChanges();
+      expect(await isCalendarVisible(page)).toBe(true);
+
+      await selectDayInMonthByIndex(page, 1);
+      await page.waitForChanges();
+      expect(await isCalendarVisible(page)).toBe(true);
+
+      await selectDayInMonthByIndex(page, 22);
+      await page.waitForChanges();
+      expect(await isCalendarVisible(page)).toBe(false);
+      expect(await inputDatePicker.getProperty("value")).not.toBeNull();
+    });
+
     it("should keep date-picker open when user select startDate from end calendar", async () => {
       const page = await newE2EPage();
       await page.setContent(html`<calcite-input-date-picker range></calcite-input-date-picker>`);
@@ -1435,6 +1459,49 @@ describe("calcite-input-date-picker", () => {
       expect(await isCalendarVisible(page)).toBe(false);
     });
 
+    it("should keep date-picker open when user is modifying the dates after initial selection in range with one calendar", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`<calcite-input-date-picker range calendars="1"></calcite-input-date-picker>`);
+      await skipAnimations(page);
+      await page.waitForChanges();
+
+      const startDatePicker = await page.find("calcite-input-date-picker >>> calcite-input-text");
+      expect(await isCalendarVisible(page)).toBe(false);
+
+      await startDatePicker.click();
+      await page.waitForChanges();
+
+      await selectDayInMonthByIndex(page, 1);
+      await page.waitForChanges();
+
+      await selectDayInMonthByIndex(page, 20);
+      await page.waitForChanges();
+
+      await startDatePicker.click();
+      await page.waitForChanges();
+      expect(await isCalendarVisible(page)).toBe(true);
+
+      await navigateMonth(page, "previous", false);
+      await page.waitForChanges();
+      expect(await isCalendarVisible(page)).toBe(true);
+
+      await navigateMonth(page, "previous", false);
+      await page.waitForChanges();
+      expect(await isCalendarVisible(page)).toBe(true);
+
+      await selectDayInMonthByIndex(page, 1);
+      await page.waitForChanges();
+      expect(await isCalendarVisible(page)).toBe(true);
+
+      await navigateMonth(page, "next", false);
+      await page.waitForChanges();
+      expect(await isCalendarVisible(page)).toBe(true);
+
+      await selectDayInMonthByIndex(page, 15);
+      await page.waitForChanges();
+      expect(await isCalendarVisible(page)).toBe(false);
+    });
+
     it("should be able to navigate months when valueAsDate is parsed", async () => {
       const page = await newE2EPage();
       await page.setContent(html`<calcite-input-date-picker range></calcite-input-date-picker>`);
@@ -1489,6 +1556,31 @@ describe("calcite-input-date-picker", () => {
       expect(value).toEqual(["2024-06-29", ""]);
     });
 
+    it("should set the endDate to empty and open the calendar when startDate is updated to date beyond initial endDate in range with one calendar", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`<calcite-input-date-picker range calendars="1"></calcite-input-date-picker>`);
+      await skipAnimations(page);
+      await page.waitForChanges();
+
+      const inputDatePickerEl = await page.find("calcite-input-date-picker");
+      const startDatePicker = await page.find("calcite-input-date-picker >>> calcite-input-text");
+      inputDatePickerEl.setProperty("value", ["2024-05-25", "2024-06-20"]);
+      expect(await isCalendarVisible(page)).toBe(false);
+
+      await startDatePicker.click();
+      await page.waitForChanges();
+      expect(await isCalendarVisible(page)).toBe(true);
+
+      await navigateMonth(page, "next", false);
+
+      await selectDayInMonthByIndex(page, 25);
+      await page.waitForChanges();
+      expect(await isCalendarVisible(page)).toBe(true);
+
+      const value = await inputDatePickerEl.getProperty("value");
+      expect(value).toEqual(["2024-06-25", ""]);
+    });
+
     it("should be able to update dates using keyboard", async () => {
       const page = await newE2EPage();
       await page.setContent(html`<calcite-input-date-picker range></calcite-input-date-picker>`);
@@ -1526,6 +1618,58 @@ describe("calcite-input-date-picker", () => {
       const value = await inputDatePickerEl.getProperty("value");
       expect(value).toEqual(["2024-03-01", "2024-06-20"]);
     });
+
+    it("should be able to update dates using keyboard in range with one calendar", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`<calcite-input-date-picker range calendars="1"></calcite-input-date-picker>`);
+      await skipAnimations(page);
+      await page.waitForChanges();
+
+      const inputDatePickerEl = await page.find("calcite-input-date-picker");
+      const startDatePicker = await page.find("calcite-input-date-picker >>> calcite-input-text");
+
+      inputDatePickerEl.setProperty("value", ["2024-05-25", "2024-06-20"]);
+      expect(await isCalendarVisible(page)).toBe(false);
+
+      await startDatePicker.click();
+      await page.waitForChanges();
+      expect(await isCalendarVisible(page)).toBe(true);
+
+      await page.keyboard.press("Tab");
+      await page.waitForChanges();
+      expect(await isCalendarVisible(page)).toBe(true);
+
+      await page.keyboard.press("Tab");
+      await page.waitForChanges();
+      expect(await isCalendarVisible(page)).toBe(true);
+
+      await page.keyboard.press("Tab");
+      await page.waitForChanges();
+      expect(await isCalendarVisible(page)).toBe(true);
+
+      await page.keyboard.press("Enter");
+      await page.waitForChanges();
+      expect(await isCalendarVisible(page)).toBe(true);
+
+      await page.keyboard.press("Enter");
+      await page.waitForChanges();
+      expect(await isCalendarVisible(page)).toBe(true);
+
+      await page.keyboard.press("Tab");
+      await page.waitForChanges();
+      expect(await isCalendarVisible(page)).toBe(true);
+
+      await page.keyboard.press("Tab");
+      await page.waitForChanges();
+      expect(await isCalendarVisible(page)).toBe(true);
+
+      await page.keyboard.press("Enter");
+      await page.waitForChanges();
+      expect(await isCalendarVisible(page)).toBe(true);
+
+      const value = await inputDatePickerEl.getProperty("value");
+      expect(value).toEqual(["2024-03-01", "2024-06-20"]);
+    });
   });
 
   describe("hover range", () => {
@@ -1681,6 +1825,51 @@ describe("calcite-input-date-picker", () => {
       expect(await calendar.isVisible()).toBe(false);
       expect(await inputDatePicker.getProperty("value")).not.toEqual(["2024-01-01", "2024-03-17"]);
     });
+
+    it("should be able to navigate between months using arrow keys and page keys in range with one calendar", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`<calcite-input-date-picker range calendars="1"></calcite-input-date-picker>`);
+      await page.waitForChanges();
+      await skipAnimations(page);
+
+      await page.evaluate(() => {
+        const inputDatePicker = document.querySelector("calcite-input-date-picker");
+        inputDatePicker.value = ["2024-01-01", "2024-02-10"];
+      });
+
+      const inputDatePicker = await page.find("calcite-input-date-picker");
+      const input = await page.find("calcite-input-date-picker >>> calcite-input-text");
+      const calendar = await page.find(`calcite-input-date-picker >>> .${CSS.calendarWrapper}`);
+      expect(await calendar.isVisible()).toBe(false);
+
+      await input.click();
+      expect(await calendar.isVisible()).toBe(true);
+
+      await navigateToDateInMonth(page, false);
+
+      await page.keyboard.press("ArrowUp");
+      await page.waitForChanges();
+      await page.keyboard.press("PageUp");
+      await page.waitForChanges();
+      await page.keyboard.press("Enter");
+      await page.waitForChanges();
+
+      expect(await calendar.isVisible()).toBe(true);
+      expect(await inputDatePicker.getProperty("value")).toEqual(["2023-11-25", "2024-02-10"]);
+
+      await page.keyboard.press("ArrowDown");
+      await page.waitForChanges();
+      expect(await calendar.isVisible()).toBe(true);
+
+      await page.keyboard.press("PageDown");
+      await page.waitForChanges();
+      expect(await calendar.isVisible()).toBe(true);
+
+      await page.keyboard.press("Enter");
+      await page.waitForChanges();
+      expect(await calendar.isVisible()).toBe(false);
+      expect(await inputDatePicker.getProperty("value")).not.toEqual(["2024-01-01", "2024-03-17"]);
+    });
   });
 
   describe("last valid month", () => {
@@ -1995,7 +2184,11 @@ async function getDateInputValue(page: E2EPage, type: "start" | "end" = "start")
   );
 }
 
-async function navigateMonth(page: E2EPage, direction: "previous" | "next", range = false): Promise<void> {
+async function navigateMonth(
+  page: E2EPage,
+  direction: "previous" | "next",
+  rangeWithTwoCalendars = false,
+): Promise<void> {
   const [datePickerMonthHeaderStart, datePickerMonthHeaderEnd] = await findAll(
     page,
     `calcite-input-date-picker >>> calcite-date-picker-month-header >>> .${MONTH_HEADER_CSS.header}`,
@@ -2003,7 +2196,7 @@ async function navigateMonth(page: E2EPage, direction: "previous" | "next", rang
 
   let prevMonth: E2EElement;
   let nextMonth: E2EElement;
-  if (range) {
+  if (rangeWithTwoCalendars) {
     prevMonth = await datePickerMonthHeaderStart.find("calcite-action");
     nextMonth = await datePickerMonthHeaderEnd.find("calcite-action");
   } else {
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
index 6c89d1c84b2..ae33fb95913 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
@@ -242,6 +242,38 @@ export const scales_TestOnly = (): string => html`
         value="2020-12-12"
       ></calcite-input-date-picker>
     </div>
+    <div class="use-case">
+      <calcite-input-date-picker
+        scale="s"
+        open
+        min="2020-12-12"
+        max="2020-12-16"
+        range
+        layout="horizontal"
+        value="2020-12-12"
+        calendars="1"
+      ></calcite-input-date-picker>
+      <calcite-input-date-picker
+        scale="m"
+        open
+        min="2020-12-12"
+        max="2020-12-16"
+        range
+        layout="horizontal"
+        value="2020-12-12"
+        calendars="1"
+      ></calcite-input-date-picker>
+      <calcite-input-date-picker
+        scale="l"
+        open
+        min="2020-12-12"
+        max="2020-12-16"
+        range
+        layout="horizontal"
+        value="2020-12-12"
+        calendars="1"
+      ></calcite-input-date-picker>
+    </div>
   </div>
 `;
 

From b97fa1a5dd37a6cfc31ec810bb50b8284786a325 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Wed, 6 Aug 2025 17:29:59 -0500
Subject: [PATCH 11/22] cleanup

---
 .../components/date-picker/date-picker.e2e.ts |  5 +---
 .../components/date-picker/date-picker.scss   |  9 +++----
 .../input-date-picker.e2e.ts                  |  9 ++-----
 .../src/demos/date-picker.html                |  2 +-
 .../src/demos/input-date-picker.html          | 25 +++++++++++++++++++
 5 files changed, 32 insertions(+), 18 deletions(-)

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 0a86e560236..99a89943b75 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
@@ -115,7 +115,6 @@ describe("calcite-date-picker", () => {
       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();
@@ -572,7 +571,6 @@ describe("calcite-date-picker", () => {
       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");
@@ -595,7 +593,6 @@ describe("calcite-date-picker", () => {
       await page.waitForChanges();
       await page.keyboard.press("Enter");
       await page.waitForChanges();
-
       expect(await datePicker.getProperty("value")).toEqual(["2023-12-08", "2024-02-08"]);
     });
   });
@@ -730,7 +727,7 @@ describe("calcite-date-picker", () => {
   });
 
   describe("month & year selection", () => {
-    it("should allow selecting first and last valid month from select menu when calendars is set to one in range", async () => {
+    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>`,
diff --git a/packages/calcite-components/src/components/date-picker/date-picker.scss b/packages/calcite-components/src/components/date-picker/date-picker.scss
index a76b47daf5b..6bdfd03ac61 100644
--- a/packages/calcite-components/src/components/date-picker/date-picker.scss
+++ b/packages/calcite-components/src/components/date-picker/date-picker.scss
@@ -38,8 +38,7 @@
   border-radius: var(--calcite-date-picker-corner-radius, 0);
 }
 
-:host([scale="s"]),
-:host([scale="s"][range][calendars="1"]) {
+:host([scale="s"]) {
   inline-size: 236px;
   min-inline-size: 216px;
   max-inline-size: 380px;
@@ -51,8 +50,7 @@
   max-inline-size: 772px;
 }
 
-:host([scale="m"]),
-:host([scale="m"][range][calendars="1"]) {
+:host([scale="m"]) {
   inline-size: 298px;
   min-inline-size: 272px;
   max-inline-size: 480px;
@@ -64,8 +62,7 @@
   max-inline-size: 972px;
 }
 
-:host([scale="l"]),
-:host([scale="l"][range][calendars="1"]) {
+:host([scale="l"]) {
   inline-size: 334px;
   min-inline-size: 320px;
   max-inline-size: 600px;
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts
index bc9a46c7520..42e64723564 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts
@@ -1844,7 +1844,6 @@ describe("calcite-input-date-picker", () => {
 
       await input.click();
       expect(await calendar.isVisible()).toBe(true);
-
       await navigateToDateInMonth(page, false);
 
       await page.keyboard.press("ArrowUp");
@@ -2184,11 +2183,7 @@ async function getDateInputValue(page: E2EPage, type: "start" | "end" = "start")
   );
 }
 
-async function navigateMonth(
-  page: E2EPage,
-  direction: "previous" | "next",
-  rangeWithTwoCalendars = false,
-): Promise<void> {
+async function navigateMonth(page: E2EPage, direction: "previous" | "next", twoCalendarsRange = false): Promise<void> {
   const [datePickerMonthHeaderStart, datePickerMonthHeaderEnd] = await findAll(
     page,
     `calcite-input-date-picker >>> calcite-date-picker-month-header >>> .${MONTH_HEADER_CSS.header}`,
@@ -2196,7 +2191,7 @@ async function navigateMonth(
 
   let prevMonth: E2EElement;
   let nextMonth: E2EElement;
-  if (rangeWithTwoCalendars) {
+  if (twoCalendarsRange) {
     prevMonth = await datePickerMonthHeaderStart.find("calcite-action");
     nextMonth = await datePickerMonthHeaderEnd.find("calcite-action");
   } else {
diff --git a/packages/calcite-components/src/demos/date-picker.html b/packages/calcite-components/src/demos/date-picker.html
index 8f1675bca1f..1d30cfee608 100644
--- a/packages/calcite-components/src/demos/date-picker.html
+++ b/packages/calcite-components/src/demos/date-picker.html
@@ -178,7 +178,7 @@ <h1 style="margin: 0 auto; text-align: center">Date-picker</h1>
         </div>
       </div>
 
-      <!-- Date Range + calendars="1" -->
+      <!-- Date Range & calendars="1" -->
       <div class="parent">
         <div class="child right-aligned-text">Date Range + calendars="1"</div>
 
diff --git a/packages/calcite-components/src/demos/input-date-picker.html b/packages/calcite-components/src/demos/input-date-picker.html
index 50802e86f18..4d17e9394e2 100644
--- a/packages/calcite-components/src/demos/input-date-picker.html
+++ b/packages/calcite-components/src/demos/input-date-picker.html
@@ -99,6 +99,31 @@
         </div>
       </div>
 
+      <!-- Range & calendars="1"-->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">Range & calendars="1"</div>
+        <div class="child-flex">
+          <calcite-label>
+            Input Date Picker Label
+            <calcite-input-date-picker range scale="s" calendars="1"></calcite-input-date-picker>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label>
+            Input Date Picker Label
+            <calcite-input-date-picker range scale="m" calendars="1"></calcite-input-date-picker>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label>
+            Input Date Picker Label
+            <calcite-input-date-picker range scale="l" calendars="1"></calcite-input-date-picker>
+          </calcite-label>
+        </div>
+      </div>
+
       <!-- Validation message -->
       <div class="parent-flex">
         <div class="child-flex font right-aligned-text">Range</div>

From 3b6d8b573c2452ffb28ba776167fda4c6926360b Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Wed, 6 Aug 2025 19:00:07 -0500
Subject: [PATCH 12/22] fix screenshot failures

---
 .../date-picker/date-picker.stories.ts           |  8 +++++++-
 .../input-date-picker.stories.ts                 | 16 +++++++---------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/calcite-components/src/components/date-picker/date-picker.stories.ts b/packages/calcite-components/src/components/date-picker/date-picker.stories.ts
index c65e4af6dcf..304fae38419 100644
--- a/packages/calcite-components/src/components/date-picker/date-picker.stories.ts
+++ b/packages/calcite-components/src/components/date-picker/date-picker.stories.ts
@@ -61,7 +61,13 @@ export const simple = (args: DatePickerStoryArgs): string => html`
 
 export const range = (): string => html`
   <div style="width: 400px">
-    <calcite-date-picker lang="${defaultLocale}" min="2016-08-09" range scale="m"></calcite-date-picker>
+    <calcite-date-picker
+      lang="${defaultLocale}"
+      min="2016-08-09"
+      range
+      scale="m"
+      value="2020-02-28"
+    ></calcite-date-picker>
   </div>
 `;
 
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
index ae33fb95913..2639c04db4a 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
@@ -194,26 +194,24 @@ export const validationMessageAllScales_TestOnly = (): string => html`
 
 export const scales_TestOnly = (): string => html`
   <style>
-    .container {
+    .parent {
       display: flex;
       flex-direction: column;
-      width: 1400px;
-      height: 1200px;
       gap: 400px;
     }
-
-    .use-case {
+    .child {
       display: flex;
       gap: 100px;
+      height: 500px;
     }
   </style>
-  <div class="container">
-    <div class="use-case">
+  <div class="parent">
+    <div class="child">
       <calcite-input-date-picker scale="s" icon open value="2020-12-12"></calcite-input-date-picker>
       <calcite-input-date-picker scale="m" icon open value="2020-12-12"></calcite-input-date-picker>
       <calcite-input-date-picker scale="l" icon open value="2020-12-12"></calcite-input-date-picker>
     </div>
-    <div class="use-case">
+    <div class="child">
       <calcite-input-date-picker
         scale="s"
         open
@@ -242,7 +240,7 @@ export const scales_TestOnly = (): string => html`
         value="2020-12-12"
       ></calcite-input-date-picker>
     </div>
-    <div class="use-case">
+    <div class="child">
       <calcite-input-date-picker
         scale="s"
         open

From 8a42982e20b98dca034f4d9414d9076bcb5d1e86 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Mon, 18 Aug 2025 17:24:37 -0500
Subject: [PATCH 13/22] refactor storybook

---
 .../input-date-picker.stories.ts              | 59 +++++++++++++++----
 1 file changed, 46 insertions(+), 13 deletions(-)

diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
index 2639c04db4a..339a5e29766 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
@@ -194,24 +194,44 @@ export const validationMessageAllScales_TestOnly = (): string => html`
 
 export const scales_TestOnly = (): string => html`
   <style>
-    .parent {
+    .default {
+      display: flex;
+      flex-direction: row;
+      min-block-size: 500px;
+      gap: 100px;
+      justify-content: space-between;
+    }
+    .range-child {
       display: flex;
       flex-direction: column;
-      gap: 400px;
+      justify-content: space-between;
     }
-    .child {
+    .heading {
       display: flex;
-      gap: 100px;
-      height: 500px;
+      flex-direction: row;
+      justify-content: space-around;
+    }
+    .range {
+      display: flex;
+      flex-direction: row;
+      min-block-size: 1600px;
+      gap: 150px;
+      justify-content: space-around;
     }
   </style>
-  <div class="parent">
-    <div class="child">
-      <calcite-input-date-picker scale="s" icon open value="2020-12-12"></calcite-input-date-picker>
-      <calcite-input-date-picker scale="m" icon open value="2020-12-12"></calcite-input-date-picker>
-      <calcite-input-date-picker scale="l" icon open value="2020-12-12"></calcite-input-date-picker>
-    </div>
-    <div class="child">
+
+  <h2>default</h2>
+  <div class="default">
+    <calcite-input-date-picker scale="s" icon open value="2020-12-12"></calcite-input-date-picker>
+    <calcite-input-date-picker scale="m" icon open value="2020-12-12"></calcite-input-date-picker>
+    <calcite-input-date-picker scale="l" icon open value="2020-12-12"></calcite-input-date-picker>
+  </div>
+  <div class="heading">
+    <h2>range</h2>
+    <h2>range & calendars="1"</h2>
+  </div>
+  <div class="range">
+    <div class="range-child">
       <calcite-input-date-picker
         scale="s"
         open
@@ -220,7 +240,10 @@ export const scales_TestOnly = (): string => html`
         range
         layout="horizontal"
         value="2020-12-12"
+        overlay-positioning="fixed"
+        placement="bottom-start"
       ></calcite-input-date-picker>
+
       <calcite-input-date-picker
         scale="m"
         open
@@ -229,6 +252,8 @@ export const scales_TestOnly = (): string => html`
         range
         layout="horizontal"
         value="2020-12-12"
+        overlay-positioning="fixed"
+        placement="bottom-start"
       ></calcite-input-date-picker>
       <calcite-input-date-picker
         scale="l"
@@ -238,9 +263,11 @@ export const scales_TestOnly = (): string => html`
         range
         layout="horizontal"
         value="2020-12-12"
+        overlay-positioning="fixed"
+        placement="bottom-start"
       ></calcite-input-date-picker>
     </div>
-    <div class="child">
+    <div class="range-child">
       <calcite-input-date-picker
         scale="s"
         open
@@ -250,6 +277,8 @@ export const scales_TestOnly = (): string => html`
         layout="horizontal"
         value="2020-12-12"
         calendars="1"
+        overlay-positioning="fixed"
+        placement="bottom-start"
       ></calcite-input-date-picker>
       <calcite-input-date-picker
         scale="m"
@@ -260,6 +289,8 @@ export const scales_TestOnly = (): string => html`
         layout="horizontal"
         value="2020-12-12"
         calendars="1"
+        overlay-positioning="fixed"
+        placement="bottom-start"
       ></calcite-input-date-picker>
       <calcite-input-date-picker
         scale="l"
@@ -270,6 +301,8 @@ export const scales_TestOnly = (): string => html`
         layout="horizontal"
         value="2020-12-12"
         calendars="1"
+        overlay-positioning="fixed"
+        placement="bottom-start"
       ></calcite-input-date-picker>
     </div>
   </div>

From 7173e013305049f7f755b3c841ebdb8367f6ce9f Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Mon, 18 Aug 2025 17:31:59 -0500
Subject: [PATCH 14/22] fix date-picker screenshot

---
 .../src/components/date-picker/date-picker.stories.ts           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/date-picker/date-picker.stories.ts b/packages/calcite-components/src/components/date-picker/date-picker.stories.ts
index 304fae38419..bd8b0caea3e 100644
--- a/packages/calcite-components/src/components/date-picker/date-picker.stories.ts
+++ b/packages/calcite-components/src/components/date-picker/date-picker.stories.ts
@@ -73,7 +73,7 @@ export const range = (): string => html`
 
 export const rangeOneCalendar = (): string => html`
   <div style="width: 400px">
-    <calcite-date-picker lang="${defaultLocale}" min="2016-08-09" range scale="m" calendars="1"></calcite-date-picker>
+    <calcite-date-picker lang="${defaultLocale}" min="2099-08-09" range scale="m" calendars="1"></calcite-date-picker>
   </div>
 `;
 

From e13600cbb7e75e606f85716f6ed7df68e5d8954b Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Wed, 20 Aug 2025 11:34:21 -0500
Subject: [PATCH 15/22] split stories

---
 .../input-date-picker.stories.ts              | 206 +++++++++---------
 1 file changed, 104 insertions(+), 102 deletions(-)

diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
index 339a5e29766..782d679e606 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
@@ -192,119 +192,121 @@ export const validationMessageAllScales_TestOnly = (): string => html`
   </div>
 `;
 
-export const scales_TestOnly = (): string => html`
+export const defaultAllScales = (): string => html`
   <style>
-    .default {
+    .container {
       display: flex;
-      flex-direction: row;
-      min-block-size: 500px;
       gap: 100px;
-      justify-content: space-between;
-    }
-    .range-child {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-    }
-    .heading {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-around;
-    }
-    .range {
-      display: flex;
-      flex-direction: row;
-      min-block-size: 1600px;
-      gap: 150px;
-      justify-content: space-around;
     }
   </style>
-
-  <h2>default</h2>
-  <div class="default">
+  <div class="container">
     <calcite-input-date-picker scale="s" icon open value="2020-12-12"></calcite-input-date-picker>
     <calcite-input-date-picker scale="m" icon open value="2020-12-12"></calcite-input-date-picker>
     <calcite-input-date-picker scale="l" icon open value="2020-12-12"></calcite-input-date-picker>
   </div>
-  <div class="heading">
-    <h2>range</h2>
-    <h2>range & calendars="1"</h2>
+`;
+
+export const rangeAllScales = (): string => html`
+  <style>
+    .container {
+      display: flex;
+      gap: 100px;
+    }
+  </style>
+  <div class="container">
+    <calcite-input-date-picker
+      scale="s"
+      open
+      min="2020-12-12"
+      max="2020-12-16"
+      range
+      layout="horizontal"
+      value="2020-12-12"
+      overlay-positioning="fixed"
+      placement="bottom-start"
+    ></calcite-input-date-picker>
+    <calcite-input-date-picker
+      scale="m"
+      open
+      min="2020-12-12"
+      max="2020-12-16"
+      range
+      layout="horizontal"
+      value="2020-12-12"
+      overlay-positioning="fixed"
+      placement="bottom-start"
+    ></calcite-input-date-picker>
+    <calcite-input-date-picker
+      scale="l"
+      open
+      min="2020-12-12"
+      max="2020-12-16"
+      range
+      layout="horizontal"
+      value="2020-12-12"
+      overlay-positioning="fixed"
+      placement="bottom-start"
+    ></calcite-input-date-picker>
   </div>
-  <div class="range">
-    <div class="range-child">
-      <calcite-input-date-picker
-        scale="s"
-        open
-        min="2020-12-12"
-        max="2020-12-16"
-        range
-        layout="horizontal"
-        value="2020-12-12"
-        overlay-positioning="fixed"
-        placement="bottom-start"
-      ></calcite-input-date-picker>
+`;
 
-      <calcite-input-date-picker
-        scale="m"
-        open
-        min="2020-12-12"
-        max="2020-12-16"
-        range
-        layout="horizontal"
-        value="2020-12-12"
-        overlay-positioning="fixed"
-        placement="bottom-start"
-      ></calcite-input-date-picker>
-      <calcite-input-date-picker
-        scale="l"
-        open
-        min="2020-12-12"
-        max="2020-12-16"
-        range
-        layout="horizontal"
-        value="2020-12-12"
-        overlay-positioning="fixed"
-        placement="bottom-start"
-      ></calcite-input-date-picker>
-    </div>
-    <div class="range-child">
-      <calcite-input-date-picker
-        scale="s"
-        open
-        min="2020-12-12"
-        max="2020-12-16"
-        range
-        layout="horizontal"
-        value="2020-12-12"
-        calendars="1"
-        overlay-positioning="fixed"
-        placement="bottom-start"
-      ></calcite-input-date-picker>
-      <calcite-input-date-picker
-        scale="m"
-        open
-        min="2020-12-12"
-        max="2020-12-16"
-        range
-        layout="horizontal"
-        value="2020-12-12"
-        calendars="1"
-        overlay-positioning="fixed"
-        placement="bottom-start"
-      ></calcite-input-date-picker>
-      <calcite-input-date-picker
-        scale="l"
-        open
-        min="2020-12-12"
-        max="2020-12-16"
-        range
-        layout="horizontal"
-        value="2020-12-12"
-        calendars="1"
-        overlay-positioning="fixed"
-        placement="bottom-start"
-      ></calcite-input-date-picker>
-    </div>
+rangeAllScales.parameters = {
+  chromatic: {
+    modes: {
+      specific: {
+        viewport: {
+          width: 2000,
+        },
+      },
+    },
+    cropToViewport: true,
+  },
+};
+
+export const rangeOneCalendarsAllScales = (): string => html`
+  <style>
+    .container {
+      display: flex;
+      gap: 100px;
+    }
+  </style>
+  <div class="container">
+    <calcite-input-date-picker
+      scale="s"
+      open
+      min="2020-12-12"
+      max="2020-12-16"
+      range
+      layout="horizontal"
+      value="2020-12-12"
+      calendars="1"
+      overlay-positioning="fixed"
+      placement="bottom-start"
+    ></calcite-input-date-picker>
+    <calcite-input-date-picker
+      scale="m"
+      open
+      min="2020-12-12"
+      max="2020-12-16"
+      range
+      layout="horizontal"
+      value="2020-12-12"
+      calendars="1"
+      overlay-positioning="fixed"
+      placement="bottom-start"
+    ></calcite-input-date-picker>
+    <calcite-input-date-picker
+      scale="l"
+      open
+      min="2020-12-12"
+      max="2020-12-16"
+      range
+      layout="horizontal"
+      value="2020-12-12"
+      calendars="1"
+      overlay-positioning="fixed"
+      placement="bottom-start"
+    ></calcite-input-date-picker>
   </div>
 `;
 

From 85d153c4f445ee9621ba3d79fa62278382131922 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Wed, 20 Aug 2025 11:51:22 -0500
Subject: [PATCH 16/22] fix stories

---
 .../input-date-picker.stories.ts                | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
index 782d679e606..bf834c4690b 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
@@ -197,6 +197,7 @@ export const defaultAllScales = (): string => html`
     .container {
       display: flex;
       gap: 100px;
+      block-size: 500px;
     }
   </style>
   <div class="container">
@@ -209,6 +210,8 @@ export const defaultAllScales = (): string => html`
 export const rangeAllScales = (): string => html`
   <style>
     .container {
+      inline-size: 200px;
+      block-size: 500px
       display: flex;
       gap: 100px;
     }
@@ -250,24 +253,12 @@ export const rangeAllScales = (): string => html`
   </div>
 `;
 
-rangeAllScales.parameters = {
-  chromatic: {
-    modes: {
-      specific: {
-        viewport: {
-          width: 2000,
-        },
-      },
-    },
-    cropToViewport: true,
-  },
-};
-
 export const rangeOneCalendarsAllScales = (): string => html`
   <style>
     .container {
       display: flex;
       gap: 100px;
+      block-size: 500px;
     }
   </style>
   <div class="container">

From 00ea0bea9329d4a838d4fa40e1ee33e152e7a01d Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Wed, 20 Aug 2025 12:29:19 -0500
Subject: [PATCH 17/22] fix viewport

---
 .../components/input-date-picker/input-date-picker.stories.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
index bf834c4690b..19f2180cc5c 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
@@ -198,6 +198,7 @@ export const defaultAllScales = (): string => html`
       display: flex;
       gap: 100px;
       block-size: 500px;
+      flex-grow: 1;
     }
   </style>
   <div class="container">
@@ -210,7 +211,7 @@ export const defaultAllScales = (): string => html`
 export const rangeAllScales = (): string => html`
   <style>
     .container {
-      inline-size: 200px;
+      inline-size: 2000px;
       block-size: 500px
       display: flex;
       gap: 100px;
@@ -259,6 +260,7 @@ export const rangeOneCalendarsAllScales = (): string => html`
       display: flex;
       gap: 100px;
       block-size: 500px;
+      flex-grow: 1;
     }
   </style>
   <div class="container">

From eeb77c83c5ebe079d17b08656e91db1e2a9536b5 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Wed, 20 Aug 2025 12:51:07 -0500
Subject: [PATCH 18/22] fix css in stories

---
 .../input-date-picker/input-date-picker.stories.ts     | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
index 19f2180cc5c..3cbd53fce13 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
@@ -195,10 +195,10 @@ export const validationMessageAllScales_TestOnly = (): string => html`
 export const defaultAllScales = (): string => html`
   <style>
     .container {
+      block-size: 500px;
       display: flex;
       gap: 100px;
-      block-size: 500px;
-      flex-grow: 1;
+      inline-size: 1200px;
     }
   </style>
   <div class="container">
@@ -212,7 +212,7 @@ export const rangeAllScales = (): string => html`
   <style>
     .container {
       inline-size: 2000px;
-      block-size: 500px
+      block-size: 500px;
       display: flex;
       gap: 100px;
     }
@@ -257,10 +257,10 @@ export const rangeAllScales = (): string => html`
 export const rangeOneCalendarsAllScales = (): string => html`
   <style>
     .container {
+      block-size: 500px;
       display: flex;
       gap: 100px;
-      block-size: 500px;
-      flex-grow: 1;
+      inline-size: 1200px;
     }
   </style>
   <div class="container">

From 1b89a90cb88dab55aaa95e60ea9f96ec62d03ee4 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Wed, 20 Aug 2025 13:04:16 -0500
Subject: [PATCH 19/22] add delay

---
 .../input-date-picker/input-date-picker.stories.ts          | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
index 3cbd53fce13..d653ebfc500 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
@@ -254,6 +254,12 @@ export const rangeAllScales = (): string => html`
   </div>
 `;
 
+rangeAllScales.parameters = {
+  chromatic: {
+    delay: 3000,
+  },
+};
+
 export const rangeOneCalendarsAllScales = (): string => html`
   <style>
     .container {

From 75bc91ff8592b8c9b1252506b8f18d76119d27d8 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Wed, 20 Aug 2025 13:20:13 -0500
Subject: [PATCH 20/22] debug screenshot tests

---
 .../input-date-picker/input-date-picker.stories.ts           | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
index d653ebfc500..ee51b8f086a 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
@@ -211,7 +211,7 @@ export const defaultAllScales = (): string => html`
 export const rangeAllScales = (): string => html`
   <style>
     .container {
-      inline-size: 2000px;
+      inline-size: 2400px;
       block-size: 500px;
       display: flex;
       gap: 100px;
@@ -249,14 +249,13 @@ export const rangeAllScales = (): string => html`
       layout="horizontal"
       value="2020-12-12"
       overlay-positioning="fixed"
-      placement="bottom-start"
     ></calcite-input-date-picker>
   </div>
 `;
 
 rangeAllScales.parameters = {
   chromatic: {
-    delay: 3000,
+    delay: 5000,
   },
 };
 

From 1d2959a7953cfe2c08b5a0d702bb4eaeafd8be81 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Wed, 20 Aug 2025 13:27:07 -0500
Subject: [PATCH 21/22] debug large scale

---
 .../components/input-date-picker/input-date-picker.stories.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
index ee51b8f086a..4b7cd471379 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
@@ -219,7 +219,7 @@ export const rangeAllScales = (): string => html`
   </style>
   <div class="container">
     <calcite-input-date-picker
-      scale="s"
+      scale="l"
       open
       min="2020-12-12"
       max="2020-12-16"
@@ -241,7 +241,7 @@ export const rangeAllScales = (): string => html`
       placement="bottom-start"
     ></calcite-input-date-picker>
     <calcite-input-date-picker
-      scale="l"
+      scale="s"
       open
       min="2020-12-12"
       max="2020-12-16"

From a2961717427c3912dd2f6b912ab9164be6614c25 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Wed, 20 Aug 2025 15:10:14 -0500
Subject: [PATCH 22/22] refactor

---
 .../input-date-picker.stories.ts              | 25 +++----------------
 1 file changed, 4 insertions(+), 21 deletions(-)

diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
index 4b7cd471379..6a2c7202b4d 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
@@ -208,10 +208,10 @@ export const defaultAllScales = (): string => html`
   </div>
 `;
 
-export const rangeAllScales = (): string => html`
+export const rangeSmallAndLargeScales = (): string => html`
   <style>
     .container {
-      inline-size: 2400px;
+      inline-size: 1500px;
       block-size: 500px;
       display: flex;
       gap: 100px;
@@ -219,7 +219,7 @@ export const rangeAllScales = (): string => html`
   </style>
   <div class="container">
     <calcite-input-date-picker
-      scale="l"
+      scale="s"
       open
       min="2020-12-12"
       max="2020-12-16"
@@ -227,10 +227,9 @@ export const rangeAllScales = (): string => html`
       layout="horizontal"
       value="2020-12-12"
       overlay-positioning="fixed"
-      placement="bottom-start"
     ></calcite-input-date-picker>
     <calcite-input-date-picker
-      scale="m"
+      scale="l"
       open
       min="2020-12-12"
       max="2020-12-16"
@@ -240,25 +239,9 @@ export const rangeAllScales = (): string => html`
       overlay-positioning="fixed"
       placement="bottom-start"
     ></calcite-input-date-picker>
-    <calcite-input-date-picker
-      scale="s"
-      open
-      min="2020-12-12"
-      max="2020-12-16"
-      range
-      layout="horizontal"
-      value="2020-12-12"
-      overlay-positioning="fixed"
-    ></calcite-input-date-picker>
   </div>
 `;
 
-rangeAllScales.parameters = {
-  chromatic: {
-    delay: 5000,
-  },
-};
-
 export const rangeOneCalendarsAllScales = (): string => html`
   <style>
     .container {