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

package/dist/types/components/datetime/datetime.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import type { Color, StyleEventDetail } from '../../interface';
-import type { DatetimePresentation, DatetimeChangeEventDetail, DatetimeParts, TitleSelectedDatesFormatter, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, FormatOptions } from './datetime-interface';
+import type { DatetimePresentation, DatetimeChangeEventDetail, DatetimeParts, DatetimeRangeParts, TitleSelectedDatesFormatter, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, FormatOptions } from './datetime-interface';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
  * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
@@ -32,6 +32,11 @@ import type { DatetimePresentation, DatetimeChangeEventDetail, DatetimeParts, Ti
  * @part calendar-day today - The calendar day that contains the current day.
  * @part calendar-day disabled - The calendar day that is disabled.
  *
+ * @part range-start - The calendar day button that is the start of a range selection.
+ * @part range-end - The calendar day button that is the end of a range selection.
+ * @part range-selection - The calendar day button that is part of a range selection (includes start and end).
+ * @part range-track - The calendar day wrapper element whose ::before pseudo-element draws the range highlight track.
+ *
  * @part datetime-header - The datetime header contains the content for the `title` slot and the selected date.
  * @part datetime-title - The element that contains the `title` slot content.
  * @part datetime-selected-date - The element that contains the selected date.
@@ -67,7 +72,7 @@ export declare class Datetime implements ComponentInterface {
     private prevPresentation;
     private resolveForceDateScrolling?;
     showMonthAndYear: boolean;
-    activeParts: DatetimeParts | DatetimeParts[];
+    activeParts: DatetimeParts | DatetimeParts[] | DatetimeRangeParts;
     workingParts: DatetimeParts;
     el: HTMLIonDatetimeElement;
     isTimePopoverOpen: boolean;
@@ -157,6 +162,16 @@ export declare class Datetime implements ComponentInterface {
     presentation: DatetimePresentation;
     protected presentationChanged(): void;
     private get isGridStyle();
+    private get isMultipleMode();
+    private get isRangeMode();
+    /**
+     * Type guard: returns true if the given activeParts is a DatetimeRangeParts object.
+     */
+    private isRangeParts;
+    /**
+     * Returns the current range parts if in range mode, or undefined otherwise.
+     */
+    private get rangeParts();
     /**
      * The text to display on the picker's cancel button.
      */
@@ -240,8 +255,31 @@ export declare class Datetime implements ComponentInterface {
     /**
      * If `true`, multiple dates can be selected at once. Only
      * applies to `presentation="date"` and `preferWheel="false"`.
+     *
+     * @deprecated Use `selectionMode="multiple"` instead.
      */
     multiple: boolean;
+    /**
+     * Controls the date selection behavior.
+     * `'multiple'` enables selecting multiple individual dates.
+     * `'range'` enables selecting a start and end date range.
+     * When unset, single-date selection is used.
+     *
+     * Range selection only works with `presentation="date"` and `preferWheel="false"`.
+     */
+    selectionMode?: 'multiple' | 'range';
+    /**
+     * The text shown in the datetime header when the start of the range
+     * is empty, also used by screen readers to announce the start date.
+     * Only applies when `selectionMode="range"`.
+     */
+    startDateLabel: string;
+    /**
+     * The text shown in the datetime header when the end of the range
+     * is empty, also used by screen readers to announce the end date.
+     * Only applies when `selectionMode="range"`.
+     */
+    endDateLabel: string;
     /**
      * Used to apply custom text and background colors to specific dates.
      *
@@ -401,7 +439,23 @@ export declare class Datetime implements ComponentInterface {
     private getActivePart;
     private closeParentOverlay;
     private setWorkingParts;
+    /**
+     * Checks whether the span from start to end contains any disabled day.
+     * Used by range mode to prevent selecting across disabled dates.
+     */
+    private rangeContainsDisabledDate;
     private setActiveParts;
+    /**
+     * Handles range selection logic when a day is clicked.
+     *
+     * Creating a new range: first click sets start, second sets end.
+     * Modifying an existing range:
+     *   - Before range → new start
+     *   - Within range → new end
+     *   - After range → new end
+     * If the resulting span contains a disabled date, start a new range instead.
+     */
+    private setActivePartsRange;
     private get isCalendarPicker();
     private initializeKeyboardListeners;
     private focusWorkingDay;
@@ -476,6 +530,16 @@ export declare class Datetime implements ComponentInterface {
     private renderTimeLabel;
     private renderTimeOverlay;
     private getHeaderSelectedDateText;
+    /**
+     * Returns the formatted range header text.
+     * Shows "Start date - End date" with placeholders from startDateLabel/endDateLabel.
+     */
+    private getRangeHeaderText;
+    /**
+     * Returns the current range value as an ISO string array for
+     * titleSelectedDatesFormatter and ionChange.
+     */
+    private getRangeValueArray;
     private renderHeader;
     /**
      * Render time picker inside of datetime.

package/dist/types/components/datetime/utils/state.d.ts

@@ -1,4 +1,4 @@
-import type { DatetimeHighlight, DatetimeHighlightCallback, DatetimeHighlightStyle, DatetimeParts } from '../datetime-interface';
+import type { DatetimeHighlight, DatetimeHighlightCallback, DatetimeHighlightStyle, DatetimeParts, DatetimeRangeParts } from '../datetime-interface';
 export declare const isYearDisabled: (refYear: number, minParts?: DatetimeParts, maxParts?: DatetimeParts) => boolean;
 /**
  * Returns true if a given day should
@@ -10,10 +10,13 @@ export declare const isDayDisabled: (refParts: DatetimeParts, minParts?: Datetim
  * Given a locale, a date, the selected date(s), and today's date,
  * generate the state for a given calendar day button.
  */
-export declare const getCalendarDayState: (locale: string, refParts: DatetimeParts, activeParts: DatetimeParts | DatetimeParts[], todayParts: DatetimeParts, minParts?: DatetimeParts, maxParts?: DatetimeParts, dayValues?: number[]) => {
+export declare const getCalendarDayState: (locale: string, refParts: DatetimeParts, activeParts: DatetimeParts | DatetimeParts[], todayParts: DatetimeParts, minParts?: DatetimeParts, maxParts?: DatetimeParts, dayValues?: number[], rangeParts?: DatetimeRangeParts) => {
     disabled: boolean;
     isActive: boolean;
     isToday: boolean;
+    isRangeStart: boolean;
+    isRangeEnd: boolean;
+    isInRange: boolean;
     ariaSelected: string | null;
     ariaLabel: string | null;
     text: string | null;

package/dist/types/components.d.ts

@@ -1165,6 +1165,11 @@ export namespace Components {
           * @default 'Done'
          */
         "doneText": string;
+        /**
+          * The text shown in the datetime header when the end of the range is empty, also used by screen readers to announce the end date. Only applies when `selectionMode="range"`.
+          * @default 'End date'
+         */
+        "endDateLabel": string;
         /**
           * The first day of the week to use for `ion-datetime`. The default value is `0` and represents Sunday.
           * @default 0
@@ -1221,6 +1226,7 @@ export namespace Components {
         "monthValues"?: number[] | number | string;
         /**
           * If `true`, multiple dates can be selected at once. Only applies to `presentation="date"` and `preferWheel="false"`.
+          * @deprecated Use `selectionMode="multiple"` instead.
           * @default false
          */
         "multiple": boolean;
@@ -1249,6 +1255,10 @@ export namespace Components {
           * @param startDate A valid [ISO-8601 string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format) to reset the datetime state to.
          */
         "reset": (startDate?: string) => Promise<void>;
+        /**
+          * Controls the date selection behavior. `'multiple'` enables selecting multiple individual dates. `'range'` enables selecting a start and end date range. When unset, single-date selection is used.  Range selection only works with `presentation="date"` and `preferWheel="false"`.
+         */
+        "selectionMode"?: 'multiple' | 'range';
         /**
           * If `true`, the datetime calendar displays a six-week (42-day) layout, including days from the previous and next months to fill the grid. These adjacent days are selectable unless disabled.
           * @default false
@@ -1279,6 +1289,11 @@ export namespace Components {
           * @default 'fixed'
          */
         "size": 'cover' | 'fixed';
+        /**
+          * The text shown in the datetime header when the start of the range is empty, also used by screen readers to announce the start date. Only applies when `selectionMode="range"`.
+          * @default 'Start date'
+         */
+        "startDateLabel": string;
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -7210,6 +7225,11 @@ declare namespace LocalJSX {
           * @default 'Done'
          */
         "doneText"?: string;
+        /**
+          * The text shown in the datetime header when the end of the range is empty, also used by screen readers to announce the end date. Only applies when `selectionMode="range"`.
+          * @default 'End date'
+         */
+        "endDateLabel"?: string;
         /**
           * The first day of the week to use for `ion-datetime`. The default value is `0` and represents Sunday.
           * @default 0
@@ -7262,6 +7282,7 @@ declare namespace LocalJSX {
         "monthValues"?: number[] | number | string;
         /**
           * If `true`, multiple dates can be selected at once. Only applies to `presentation="date"` and `preferWheel="false"`.
+          * @deprecated Use `selectionMode="multiple"` instead.
           * @default false
          */
         "multiple"?: boolean;
@@ -7301,6 +7322,10 @@ declare namespace LocalJSX {
           * @default false
          */
         "readonly"?: boolean;
+        /**
+          * Controls the date selection behavior. `'multiple'` enables selecting multiple individual dates. `'range'` enables selecting a start and end date range. When unset, single-date selection is used.  Range selection only works with `presentation="date"` and `preferWheel="false"`.
+         */
+        "selectionMode"?: 'multiple' | 'range';
         /**
           * If `true`, the datetime calendar displays a six-week (42-day) layout, including days from the previous and next months to fill the grid. These adjacent days are selectable unless disabled.
           * @default false
@@ -7331,6 +7356,11 @@ declare namespace LocalJSX {
           * @default 'fixed'
          */
         "size"?: 'cover' | 'fixed';
+        /**
+          * The text shown in the datetime header when the start of the range is empty, also used by screen readers to announce the start date. Only applies when `selectionMode="range"`.
+          * @default 'Start date'
+         */
+        "startDateLabel"?: string;
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -10815,6 +10845,9 @@ declare namespace LocalJSX {
         "locale": string;
         "firstDayOfWeek": number;
         "multiple": boolean;
+        "selectionMode": 'multiple' | 'range';
+        "startDateLabel": string;
+        "endDateLabel": string;
         "value": string | string[] | null;
         "showDefaultTitle": boolean;
         "showDefaultButtons": boolean;