@ionic/core 8.8.20-dev.11791579113.1f843ab0 → 8.8.20-dev.11792194859.16be5d7f

package/dist/collection/components/datetime/datetime.md.css

@@ -349,11 +349,83 @@
 
 :host .calendar-day-wrapper {
   display: flex;
+  position: relative;
   align-items: center;
   justify-content: center;
   min-width: 0;
   min-height: 0;
   overflow: visible;
+  /**
+   * Create a stacking context so the range track
+   * (::before with z-index: -1) stays behind the
+   * day button but above the host background.
+   */
+  z-index: 0;
+}
+
+/**
+ * The ::before pseudo-element on the calendar-day-wrapper
+ * draws the colored background track that connects the
+ * range start to the range end. The track is vertically
+ * centered and sized to match the day button height.
+ *
+ * @prop --range-background: The background color of the range selection track.
+ */
+:host .calendar-day-wrapper-range-start::before,
+:host .calendar-day-wrapper-in-range::before,
+:host .calendar-day-wrapper-range-end::before {
+  position: absolute;
+  /**
+   * Vertically center the track and size it to
+   * match the calendar day button height.
+   */
+  top: 50%;
+  height: var(--range-track-height);
+  transform: translateY(-50%);
+  background: var(--range-background);
+  content: "";
+  z-index: -1;
+}
+
+:host .calendar-day-wrapper-range-start::before {
+  inset-inline-start: 50%;
+  inset-inline-end: 0;
+}
+
+:host .calendar-day-wrapper-in-range::before {
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+}
+
+:host .calendar-day-wrapper-range-end::before {
+  inset-inline-start: 0;
+  inset-inline-end: 50%;
+}
+
+/**
+ * When a single day is both the start and end of the range,
+ * do not show a track since there is nothing to connect.
+ */
+:host .calendar-day-wrapper-range-start.calendar-day-wrapper-range-end::before {
+  display: none;
+}
+
+/**
+ * When the component is disabled, move the opacity to the wrapper
+ * so both the track and day button fade equally. Without this,
+ * the day button becomes semi-transparent (via native disabled opacity)
+ * while the track stays opaque, causing a visible overlap.
+ */
+:host(.datetime-disabled) .calendar-day-wrapper-range-start,
+:host(.datetime-disabled) .calendar-day-wrapper-in-range,
+:host(.datetime-disabled) .calendar-day-wrapper-range-end {
+  opacity: 0.4;
+}
+
+:host(.datetime-disabled) .calendar-day-wrapper-range-start .calendar-day[disabled],
+:host(.datetime-disabled) .calendar-day-wrapper-in-range .calendar-day[disabled],
+:host(.datetime-disabled) .calendar-day-wrapper-range-end .calendar-day[disabled] {
+  opacity: 1;
 }
 
 /**
@@ -864,6 +936,51 @@ ion-picker {
   color: var(--ion-color-step-500, var(--ion-text-color-step-500, gray));
 }
 
+:host {
+  --range-background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);
+  --range-track-height: 42px;
+}
+
+:host(.ion-color) {
+  --range-background: rgba(var(--ion-color-base-rgb), 0.2);
+}
+
+:host .calendar-day.calendar-day-range-start {
+  border-radius: 50% 0 0 50%;
+  background: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary-contrast, #fff);
+}
+
+:host .calendar-day.calendar-day-range-end {
+  border-radius: 0 50% 50% 0;
+  background: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary-contrast, #fff);
+}
+
+:host .calendar-day.calendar-day-range-start.calendar-day-range-end {
+  border-radius: 50%;
+}
+
+:host .calendar-day.calendar-day-in-range {
+  border-radius: 0;
+  background: none;
+}
+
+:host(.ion-color) .calendar-day.calendar-day-range-start,
+:host(.ion-color) .calendar-day.calendar-day-range-end {
+  background: var(--ion-color-base);
+  color: var(--ion-color-contrast);
+}
+
+:host .calendar-day.calendar-day-today.calendar-day-in-range {
+  border: none;
+  color: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color) .calendar-day.calendar-day-today.calendar-day-in-range {
+  color: var(--ion-color-base);
+}
+
 :host .datetime-time {
   -webkit-padding-start: 16px;
   padding-inline-start: 16px;

package/dist/collection/components/datetime/utils/state.js

@@ -74,7 +74,7 @@ export const isDayDisabled = (refParts, minParts, maxParts, dayValues) => {
  * Given a locale, a date, the selected date(s), and today's date,
  * generate the state for a given calendar day button.
  */
-export const getCalendarDayState = (locale, refParts, activeParts, todayParts, minParts, maxParts, dayValues) => {
+export const getCalendarDayState = (locale, refParts, activeParts, todayParts, minParts, maxParts, dayValues, rangeParts) => {
     /**
      * activeParts signals what day(s) are currently selected in the datetime.
      * If multiple="true", this will be an array, but the logic in this util
@@ -90,6 +90,20 @@ export const getCalendarDayState = (locale, refParts, activeParts, todayParts, m
     const isActive = activePartsArray.find((parts) => isSameDay(refParts, parts)) !== undefined;
     const isToday = isSameDay(refParts, todayParts);
     const disabled = isDayDisabled(refParts, minParts, maxParts, dayValues);
+    /**
+     * Range state: determine if this day is the range start, end, or in between.
+     */
+    let isRangeStart = false;
+    let isRangeEnd = false;
+    let isInRange = false;
+    if (rangeParts) {
+        const { start, end } = rangeParts;
+        isRangeStart = isSameDay(refParts, start);
+        if (end) {
+            isRangeEnd = isSameDay(refParts, end);
+            isInRange = !disabled && !isRangeStart && !isRangeEnd && isAfter(refParts, start) && isBefore(refParts, end);
+        }
+    }
     /**
      * Note that we always return one object regardless of whether activeParts
      * was an array, since we pare down to one value for isActive.
@@ -98,6 +112,9 @@ export const getCalendarDayState = (locale, refParts, activeParts, todayParts, m
         disabled,
         isActive,
         isToday,
+        isRangeStart,
+        isRangeEnd,
+        isInRange,
         ariaSelected: isActive ? 'true' : null,
         ariaLabel: generateDayAriaLabel(locale, isToday, refParts),
         text: refParts.day != null ? getDay(locale, refParts) : null,

package/dist/collection/components/datetime-button/datetime-button.js

@@ -55,12 +55,12 @@ export class DatetimeButton {
          * to the locale specified on ion-datetime.
          */
         this.setDateTimeText = async () => {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d;
             const { datetimeEl, datetimePresentation } = this;
             if (!datetimeEl) {
                 return;
             }
-            const { value, locale, formatOptions, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
+            const { value, locale, formatOptions, hourCycle, preferWheel, multiple, selectionMode, titleSelectedDatesFormatter, } = datetimeEl;
             const parsedValues = this.getParsedDateValues(value);
             /**
              * Both ion-datetime and ion-datetime-button default to today's date and
@@ -72,6 +72,8 @@ export class DatetimeButton {
             if (!parsedDatetimes) {
                 return;
             }
+            const isRangeMode = selectionMode === 'range';
+            const isMultipleMode = selectionMode === 'multiple' || (selectionMode === undefined && multiple);
             /**
              * If developers incorrectly use multiple="true"
              * with non "date" datetimes, then just select
@@ -81,11 +83,12 @@ export class DatetimeButton {
              */
             const firstParsedDatetime = parsedDatetimes[0];
             const computedHourCycle = getHourCycle(locale, hourCycle);
+            const dateFormatOptions = (_a = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _a !== void 0 ? _a : { month: 'short', day: 'numeric', year: 'numeric' };
             this.dateText = this.timeText = undefined;
             switch (datetimePresentation) {
                 case 'date-time':
                 case 'time-date':
-                    const dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_a = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _a !== void 0 ? _a : { month: 'short', day: 'numeric', year: 'numeric' });
+                    const dateText = getLocalizedDateTime(locale, firstParsedDatetime, dateFormatOptions);
                     const timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time);
                     if (preferWheel) {
                         this.dateText = `${dateText} ${timeText}`;
@@ -96,7 +99,22 @@ export class DatetimeButton {
                     }
                     break;
                 case 'date':
-                    if (multiple && parsedValues.length !== 1) {
+                    if (isRangeMode && parsedValues.length === 2) {
+                        // Range mode: display "startDate - endDate"
+                        const startDate = getLocalizedDateTime(locale, parsedDatetimes[0], dateFormatOptions);
+                        const endDate = getLocalizedDateTime(locale, parsedDatetimes.length > 1 ? parsedDatetimes[1] : parsedDatetimes[0], dateFormatOptions);
+                        let rangeText = `${startDate} - ${endDate}`;
+                        if (titleSelectedDatesFormatter !== undefined) {
+                            try {
+                                rangeText = titleSelectedDatesFormatter(parsedValues);
+                            }
+                            catch (e) {
+                                printIonError('[ion-datetime-button] - Exception in provided `titleSelectedDatesFormatter`:', e);
+                            }
+                        }
+                        this.dateText = rangeText;
+                    }
+                    else if (isMultipleMode && parsedValues.length !== 1) {
                         let headerText = `${parsedValues.length} days`; // default/fallback for multiple selection
                         if (titleSelectedDatesFormatter !== undefined) {
                             try {
@@ -109,20 +127,20 @@ export class DatetimeButton {
                         this.dateText = headerText;
                     }
                     else {
-                        this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_b = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _b !== void 0 ? _b : { month: 'short', day: 'numeric', year: 'numeric' });
+                        this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, dateFormatOptions);
                     }
                     break;
                 case 'time':
                     this.timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time);
                     break;
                 case 'month-year':
-                    this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_c = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _c !== void 0 ? _c : { month: 'long', year: 'numeric' });
+                    this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_b = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _b !== void 0 ? _b : { month: 'long', year: 'numeric' });
                     break;
                 case 'month':
-                    this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_d = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) !== null && _d !== void 0 ? _d : { month: 'long' });
+                    this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_c = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) !== null && _c !== void 0 ? _c : { month: 'long' });
                     break;
                 case 'year':
-                    this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_e = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) !== null && _e !== void 0 ? _e : { year: 'numeric' });
+                    this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_d = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) !== null && _d !== void 0 ? _d : { year: 'numeric' });
                     break;
             }
         };
@@ -343,11 +361,11 @@ export class DatetimeButton {
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
         const theme = getIonTheme(this);
-        return (h(Host, { key: '8cdd9935131b68d84ac601f78d5967383eaaf25e', class: createColorClasses(color, {
+        return (h(Host, { key: 'b1bc06c9642af956c42e886af07e27176ba4a13a', class: createColorClasses(color, {
                 [theme]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,
-            }) }, dateText && (h("button", { key: 'dfd6d83cdca3673383a21e213dae825b5643600d', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, h("slot", { key: 'f7cabbcd6474c66283fb0681a3d75f36a88750d6', name: "date-target" }, dateText), theme === 'md' && h("ion-ripple-effect", { key: '3aace053cea80aa3bb30a06c8e1f1d18650d8796' }))), timeText && (h("button", { key: 'c8fac088f4e6ee2486110a59574bd95cd3be870b', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, h("slot", { key: '195df2d17f6bd28c9cf6ad657e55948472544985', name: "time-target" }, timeText), theme === 'md' && h("ion-ripple-effect", { key: 'aa1a1f5ea120558174b166c2b2d5fa970ca00d2c' })))));
+            }) }, dateText && (h("button", { key: '3939366688b3be6db62b70b6a3b717819934560f', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, h("slot", { key: 'e4cf933fcfdb2c7559806af448c4ec8dfd5a5e14', name: "date-target" }, dateText), theme === 'md' && h("ion-ripple-effect", { key: 'b1c11e4c67bce14f5dfa8b69a15cde5b367b1c4a' }))), timeText && (h("button", { key: '708c2070eecabf09e3db6d8f8a45a76ecd53ccf8', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, h("slot", { key: '2885629c3fb033b234bfae0ec9038874e109b0de', name: "time-target" }, timeText), theme === 'md' && h("ion-ripple-effect", { key: '4eed69bef9ed46fb1fd53605bcd05cd104e2505b' })))));
     }
     static get is() { return "ion-datetime-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-10-09T20:55:27",
+  "timestamp": "2026-10-16T23:57:18",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",
@@ -10811,6 +10811,22 @@
           "name": "part",
           "text": "calendar-day disabled - The calendar day that is disabled."
         },
+        {
+          "name": "part",
+          "text": "range-start - The calendar day button that is the start of a range selection."
+        },
+        {
+          "name": "part",
+          "text": "range-end - The calendar day button that is the end of a range selection."
+        },
+        {
+          "name": "part",
+          "text": "range-selection - The calendar day button that is part of a range selection (includes start and end)."
+        },
+        {
+          "name": "part",
+          "text": "range-track - The calendar day wrapper element whose ::before pseudo-element draws the range highlight track."
+        },
         {
           "name": "part",
           "text": "datetime-header - The datetime header contains the content for the `title` slot and the selected date."
@@ -11049,6 +11065,35 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "endDateLabel",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "end-date-label",
+          "reflectToAttr": false,
+          "docs": "The text shown in the datetime header when the end of the range\nis empty, also used by screen readers to announce the end date.\nOnly applies when `selectionMode=\"range\"`.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'End date'"
+            }
+          ],
+          "default": "'End date'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "firstDayOfWeek",
           "type": "number",
@@ -11445,12 +11490,17 @@
           "reflectToAttr": false,
           "docs": "If `true`, multiple dates can be selected at once. Only\napplies to `presentation=\"date\"` and `preferWheel=\"false\"`.",
           "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "Use `selectionMode=\"multiple\"` instead."
+            },
             {
               "name": "default",
               "text": "false"
             }
           ],
           "default": "false",
+          "deprecation": "Use `selectionMode=\"multiple\"` instead.",
           "values": [
             {
               "type": "boolean"
@@ -11609,6 +11659,37 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "selectionMode",
+          "type": "\"multiple\" | \"range\" | undefined",
+          "complexType": {
+            "original": "'multiple' | 'range'",
+            "resolved": "\"multiple\" | \"range\" | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "selection-mode",
+          "reflectToAttr": false,
+          "docs": "Controls the date selection behavior.\n`'multiple'` enables selecting multiple individual dates.\n`'range'` enables selecting a start and end date range.\nWhen unset, single-date selection is used.\n\nRange selection only works with `presentation=\"date\"` and `preferWheel=\"false\"`.",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "multiple",
+              "type": "string"
+            },
+            {
+              "value": "range",
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "showAdjacentDays",
           "type": "boolean",
@@ -11788,6 +11869,35 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "startDateLabel",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "start-date-label",
+          "reflectToAttr": false,
+          "docs": "The text shown in the datetime header when the start of the range\nis empty, also used by screen readers to announce the start date.\nOnly applies when `selectionMode=\"range\"`.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'Start date'"
+            }
+          ],
+          "default": "'Start date'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "theme",
           "type": "\"ios\" | \"md\" | \"ionic\"",
@@ -11969,6 +12079,12 @@
               "Promise": {
                 "location": "global",
                 "id": "global::Promise"
+              },
+              "DatetimeParts": {
+                "location": "import",
+                "path": "./datetime-interface",
+                "id": "src/components/datetime/datetime-interface.ts::DatetimeParts",
+                "referenceLocation": "DatetimeParts"
               }
             },
             "return": "Promise<void>"
@@ -12138,6 +12254,24 @@
           "docs": "The width of the ring around the focused element.",
           "mode": "ionic"
         },
+        {
+          "name": "--range-background",
+          "annotation": "prop",
+          "docs": "The background color of the range selection track.",
+          "mode": "ionic"
+        },
+        {
+          "name": "--range-background",
+          "annotation": "prop",
+          "docs": "The background color of the range selection track.",
+          "mode": "ios"
+        },
+        {
+          "name": "--range-background",
+          "annotation": "prop",
+          "docs": "The background color of the range selection track.",
+          "mode": "md"
+        },
         {
           "name": "--title-color",
           "annotation": "prop",
@@ -12254,6 +12388,22 @@
           "name": "previous-button",
           "docs": "The button used to navigate to the previous month when using a grid style layout."
         },
+        {
+          "name": "range-end",
+          "docs": "The calendar day button that is the end of a range selection."
+        },
+        {
+          "name": "range-selection",
+          "docs": "The calendar day button that is part of a range selection (includes start and end)."
+        },
+        {
+          "name": "range-start",
+          "docs": "The calendar day button that is the start of a range selection."
+        },
+        {
+          "name": "range-track",
+          "docs": "The calendar day wrapper element whose ::before pseudo-element draws the range highlight track."
+        },
         {
           "name": "time-button",
           "docs": "The button that opens the time picker when using a grid style\nlayout with `presentation=\"date-time\"` or `\"time-date\"`."

package/dist/esm/{format-2WlZcMvG.js → format-BNGmd1mx.js}

@@ -1112,4 +1112,4 @@ const formatValue = (value) => {
     return Array.isArray(value) ? value.join(',') : value;
 };
 
-export { getNextWeek as A, parseMinParts as B, parseMaxParts as C, parseDate as D, warnIfValueOutOfBounds as E, parseAmPm as F, clampDate as G, convertToArrayOfNumbers as H, convertDataToISO as I, getClosestValidDate as J, isMonthFirstLocale as K, isLocaleDayPeriodRTL as L, calculateHourFromAMPM as M, getMonthAndYear as N, getLocalizedTime as O, getLocalizedDateTime as P, formatValue as Q, getPreviousMonth as a, getTodayLabel as b, getYear as c, getHourCycle as d, getInternalHourValue as e, getFormattedHour as f, getNextMonth as g, addTimePadding as h, isSameDay as i, getLocalizedDayPeriod as j, isBefore as k, isAfter as l, is24Hour as m, getNumDaysInMonth as n, getDay as o, generateDayAriaLabel as p, getPartsFromCalendarDay as q, removeDateTzOffset as r, getNextYear as s, getPreviousYear as t, getEndOfWeek as u, validateParts as v, getStartOfWeek as w, getPreviousDay as x, getNextDay as y, getPreviousWeek as z };
+export { getPreviousWeek as A, getNextWeek as B, parseMinParts as C, parseMaxParts as D, parseDate as E, warnIfValueOutOfBounds as F, clampDate as G, parseAmPm as H, convertToArrayOfNumbers as I, getClosestValidDate as J, isMonthFirstLocale as K, isLocaleDayPeriodRTL as L, calculateHourFromAMPM as M, getMonthAndYear as N, getLocalizedTime as O, getLocalizedDateTime as P, formatValue as Q, getPreviousMonth as a, getTodayLabel as b, getYear as c, getHourCycle as d, getInternalHourValue as e, getFormattedHour as f, getNextMonth as g, addTimePadding as h, isSameDay as i, getLocalizedDayPeriod as j, isBefore as k, isAfter as l, is24Hour as m, getNumDaysInMonth as n, getDay as o, generateDayAriaLabel as p, getNextDay as q, removeDateTzOffset as r, convertDataToISO as s, getPartsFromCalendarDay as t, getNextYear as u, validateParts as v, getPreviousYear as w, getEndOfWeek as x, getStartOfWeek as y, getPreviousDay as z };

package/dist/esm/ion-datetime-button.entry.js

@@ -5,7 +5,7 @@ import { r as registerInstance, j as printIonError, h, d as Host, g as getElemen
 import { f as addEventListener, c as componentOnReady } from './helpers-ChPZH7zh.js';
 import { c as createColorClasses } from './theme-DaJxRxSQ.js';
 import { c as getIonTheme } from './ionic-global-BJDU78B6.js';
-import { D as parseDate, d as getHourCycle, P as getLocalizedDateTime, O as getLocalizedTime } from './format-2WlZcMvG.js';
+import { E as parseDate, d as getHourCycle, P as getLocalizedDateTime, O as getLocalizedTime } from './format-BNGmd1mx.js';
 import './focus-visible-vXpMhGrs.js';
 import './dir-o8OKV5aD.js';
 
@@ -53,12 +53,12 @@ const DatetimeButton = class {
          * to the locale specified on ion-datetime.
          */
         this.setDateTimeText = async () => {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d;
             const { datetimeEl, datetimePresentation } = this;
             if (!datetimeEl) {
                 return;
             }
-            const { value, locale, formatOptions, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
+            const { value, locale, formatOptions, hourCycle, preferWheel, multiple, selectionMode, titleSelectedDatesFormatter, } = datetimeEl;
             const parsedValues = this.getParsedDateValues(value);
             /**
              * Both ion-datetime and ion-datetime-button default to today's date and
@@ -70,6 +70,8 @@ const DatetimeButton = class {
             if (!parsedDatetimes) {
                 return;
             }
+            const isRangeMode = selectionMode === 'range';
+            const isMultipleMode = selectionMode === 'multiple' || (selectionMode === undefined && multiple);
             /**
              * If developers incorrectly use multiple="true"
              * with non "date" datetimes, then just select
@@ -79,11 +81,12 @@ const DatetimeButton = class {
              */
             const firstParsedDatetime = parsedDatetimes[0];
             const computedHourCycle = getHourCycle(locale, hourCycle);
+            const dateFormatOptions = (_a = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _a !== void 0 ? _a : { month: 'short', day: 'numeric', year: 'numeric' };
             this.dateText = this.timeText = undefined;
             switch (datetimePresentation) {
                 case 'date-time':
                 case 'time-date':
-                    const dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_a = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _a !== void 0 ? _a : { month: 'short', day: 'numeric', year: 'numeric' });
+                    const dateText = getLocalizedDateTime(locale, firstParsedDatetime, dateFormatOptions);
                     const timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time);
                     if (preferWheel) {
                         this.dateText = `${dateText} ${timeText}`;
@@ -94,7 +97,22 @@ const DatetimeButton = class {
                     }
                     break;
                 case 'date':
-                    if (multiple && parsedValues.length !== 1) {
+                    if (isRangeMode && parsedValues.length === 2) {
+                        // Range mode: display "startDate - endDate"
+                        const startDate = getLocalizedDateTime(locale, parsedDatetimes[0], dateFormatOptions);
+                        const endDate = getLocalizedDateTime(locale, parsedDatetimes.length > 1 ? parsedDatetimes[1] : parsedDatetimes[0], dateFormatOptions);
+                        let rangeText = `${startDate} - ${endDate}`;
+                        if (titleSelectedDatesFormatter !== undefined) {
+                            try {
+                                rangeText = titleSelectedDatesFormatter(parsedValues);
+                            }
+                            catch (e) {
+                                printIonError('[ion-datetime-button] - Exception in provided `titleSelectedDatesFormatter`:', e);
+                            }
+                        }
+                        this.dateText = rangeText;
+                    }
+                    else if (isMultipleMode && parsedValues.length !== 1) {
                         let headerText = `${parsedValues.length} days`; // default/fallback for multiple selection
                         if (titleSelectedDatesFormatter !== undefined) {
                             try {
@@ -107,20 +125,20 @@ const DatetimeButton = class {
                         this.dateText = headerText;
                     }
                     else {
-                        this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_b = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _b !== void 0 ? _b : { month: 'short', day: 'numeric', year: 'numeric' });
+                        this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, dateFormatOptions);
                     }
                     break;
                 case 'time':
                     this.timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time);
                     break;
                 case 'month-year':
-                    this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_c = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _c !== void 0 ? _c : { month: 'long', year: 'numeric' });
+                    this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_b = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _b !== void 0 ? _b : { month: 'long', year: 'numeric' });
                     break;
                 case 'month':
-                    this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_d = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) !== null && _d !== void 0 ? _d : { month: 'long' });
+                    this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_c = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) !== null && _c !== void 0 ? _c : { month: 'long' });
                     break;
                 case 'year':
-                    this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_e = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) !== null && _e !== void 0 ? _e : { year: 'numeric' });
+                    this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_d = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) !== null && _d !== void 0 ? _d : { year: 'numeric' });
                     break;
             }
         };
@@ -341,11 +359,11 @@ const DatetimeButton = class {
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
         const theme = getIonTheme(this);
-        return (h(Host, { key: '8cdd9935131b68d84ac601f78d5967383eaaf25e', class: createColorClasses(color, {
+        return (h(Host, { key: 'b1bc06c9642af956c42e886af07e27176ba4a13a', class: createColorClasses(color, {
                 [theme]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,
-            }) }, dateText && (h("button", { key: 'dfd6d83cdca3673383a21e213dae825b5643600d', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, h("slot", { key: 'f7cabbcd6474c66283fb0681a3d75f36a88750d6', name: "date-target" }, dateText), theme === 'md' && h("ion-ripple-effect", { key: '3aace053cea80aa3bb30a06c8e1f1d18650d8796' }))), timeText && (h("button", { key: 'c8fac088f4e6ee2486110a59574bd95cd3be870b', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, h("slot", { key: '195df2d17f6bd28c9cf6ad657e55948472544985', name: "time-target" }, timeText), theme === 'md' && h("ion-ripple-effect", { key: 'aa1a1f5ea120558174b166c2b2d5fa970ca00d2c' })))));
+            }) }, dateText && (h("button", { key: '3939366688b3be6db62b70b6a3b717819934560f', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, h("slot", { key: 'e4cf933fcfdb2c7559806af448c4ec8dfd5a5e14', name: "date-target" }, dateText), theme === 'md' && h("ion-ripple-effect", { key: 'b1c11e4c67bce14f5dfa8b69a15cde5b367b1c4a' }))), timeText && (h("button", { key: '708c2070eecabf09e3db6d8f8a45a76ecd53ccf8', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, h("slot", { key: '2885629c3fb033b234bfae0ec9038874e109b0de', name: "time-target" }, timeText), theme === 'md' && h("ion-ripple-effect", { key: '4eed69bef9ed46fb1fd53605bcd05cd104e2505b' })))));
     }
     get el() { return getElement(this); }
 };