[OS-susmitabhowmik]

Issue number: resolves internal

---

What is the current behavior?

ion-datetime supports selecting a single date or multiple individual dates (via the multiple boolean prop). There is no way to select a contiguous range of dates with a start and end date.

What is the new behavior?

• Adds a new selectionMode prop with "range" and "multiple" options. Single-date selection remains the default when unset.
• Range mode (selectionMode="range") allows users to select a start and end date. The first tap sets the start, the second tap sets the end. Tapping again resets the range.
• Range selection is visualized with pill-shaped start/end days and a colored track connecting them, consistent across ionic, iOS, and MD themes.
• Today's date retains its blue text color when it falls within a range.
• Adds startDateLabel and endDateLabel props for customizing header text and screen reader announcements.
• Adds --range-background CSS custom property for theming the range track color.
• Adds range-start, range-end, range-selection, and range-track CSS shadow parts.
• The confirm button is disabled until both start and end dates are selected.
• ion-datetime-button displays the range as "startDate - endDate".
• Readonly ranges display normally (not faded); disabled ranges fade the track and pills equally.
• Deprecates the multiple boolean prop in favor of selectionMode="multiple".
• Range selection only works with presentation="date" and preferWheel="false".

Does this introduce a breaking change?

• Yes
• No

The multiple prop continues to work but is deprecated. A console warning is logged when used.

Other information

• Datetime - Range Test Page
• Datetime - Range Styling Test Page

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
ionic-framework	Ready	Preview	Oct 29, 2026 9:19pm UTC

[ShaneK]

Great work on the fixes, everything from the first round works! Just a few more things, mainly cancel erasing a confirmed range that hasn't changed and the disabled fade picking up non-range datetimes in the ionic theme. A handful of the new tests also pass without their fix, so I left suggestions for those.

[ShaneK]

Great work! Looks good to me 🚀

[thetaPC]

• Reading parsedDatetimes[0] and [1] in the order given makes a programmatic ['2023-10-31', '2023-10-23'] show "Oct 31, 2023 - Oct 23, 2023" on the button, while the datetime normalizes it to Oct 23 to Oct 31.
• The length === 2 check sends a three-entry value to the single-date branch, so the button shows only the first date while the datetime uses the first and last.
• titleSelectedDatesFormatter gets the raw array here but the normalized pair in the datetime header.

Suggested change

	if (isRangeMode && parsedValues.length === 2) {
	// Range mode: display "startDate - endDate"
	const startDate = getLocalizedDateTime(locale, parsedDatetimes[0], dateFormatOptions);
	const endDate = getLocalizedDateTime(locale, parsedDatetimes[1], 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;
	if (isRangeMode && parsedValues.length >= 2) {
	/**
	* Use the first and last entries in date order, matching
	* how ion-datetime reads a range value.
	*/
	let startIndex = 0;
	let endIndex = parsedValues.length - 1;
	if (isAfter(parsedDatetimes[startIndex], parsedDatetimes[endIndex])) {
	[startIndex, endIndex] = [endIndex, startIndex];
	}
	const rangeValues = [parsedValues[startIndex], parsedValues[endIndex]];
	const startDate = getLocalizedDateTime(locale, parsedDatetimes[startIndex], dateFormatOptions);
	const endDate = getLocalizedDateTime(locale, parsedDatetimes[endIndex], dateFormatOptions);
	let rangeText = `${startDate} - ${endDate}`;
	if (titleSelectedDatesFormatter !== undefined) {
	try {
	rangeText = titleSelectedDatesFormatter(rangeValues);
	} catch (e) {
	printIonError('[ion-datetime-button] - Exception in provided `titleSelectedDatesFormatter`:', e);
	}
	}
	this.dateText = rangeText;

This also needs import { isAfter } from '../datetime/utils/comparison'; at the top of the file. Please add an e2e case for a reversed value.

[thetaPC]

• Passing only parsedDayValues to the span check lets a user pick Jan 30 to Mar 2 with monthValues="1,3", so the range covers all of February.
• The design doc treats days excluded by dayValues, monthValues and yearValues as disabled for range purposes.
• Please add a test that a range can't span a month excluded by monthValues.

Suggested change

	const { minParts, maxParts, parsedDayValues, isDateEnabled } = this;
	let cursor = getNextDay(start);
	while (isBefore(cursor, end)) {
	if (isDayDisabled(cursor, minParts, maxParts, parsedDayValues)) {
	return true;
	}
	const { minParts, maxParts, parsedDayValues, parsedMonthValues, parsedYearValues, isDateEnabled } = this;
	let cursor = getNextDay(start);
	while (isBefore(cursor, end)) {
	if (
	isDayDisabled(cursor, minParts, maxParts, parsedDayValues) ||
	(parsedMonthValues !== undefined && !parsedMonthValues.includes(cursor.month)) ||
	(parsedYearValues !== undefined && !parsedYearValues.includes(cursor.year))
	) {
	return true;
	}

[thetaPC]

• Leaving the early return [] and return [convertDataToISO(range.start)] unbraced makes them easy to extend into a bug later, and the rest of the range code braces its if bodies.

Suggested change

	if (!range) return [];
	if (!range.end) return [convertDataToISO(range.start)];
	if (!range) {
	return [];
	}
	if (!range.end) {
	return [convertDataToISO(range.start)];
	}

[thetaPC]

• Both endpoints are already full circles, so the .calendar-day-range-start.calendar-day-range-end rule sets the same radius again and can go.
• The start and end blocks are identical, so one selector list keeps them from drifting apart.

Suggested change

	// Range start: full circle
	// Use :host prefix for specificity over the general disabled day rule.
	:host .calendar-day.calendar-day-range-start {
	@include globals.border-radius(globals.$ion-border-radius-full);
	background: globals.$ion-bg-primary-base-default;
	color: globals.$ion-text-inverse;
	}
	// Range end: full circle
	:host .calendar-day.calendar-day-range-end {
	@include globals.border-radius(globals.$ion-border-radius-full);
	background: globals.$ion-bg-primary-base-default;
	color: globals.$ion-text-inverse;
	}
	// Single day range: both start and end, restore full circle
	.calendar-day.calendar-day-range-start.calendar-day-range-end {
	@include globals.border-radius(globals.$ion-border-radius-full);
	}
	// Range start and end: full circle
	// Use :host prefix for specificity over the general disabled day rule.
	:host .calendar-day.calendar-day-range-start,
	:host .calendar-day.calendar-day-range-end {
	@include globals.border-radius(globals.$ion-border-radius-full);
	background: globals.$ion-bg-primary-base-default;
	color: globals.$ion-text-inverse;
	}

[thetaPC]

Same as the ionic theme: the single-day rule repeats the endpoints' radius, and the start and end blocks are identical.

Suggested change

	// Range start: full circle
	:host .calendar-day.calendar-day-range-start {
	@include border-radius(50%);
	background: ion-color(primary, base);
	color: ion-color(primary, contrast);
	font-weight: 600;
	}
	// Range end: full circle
	:host .calendar-day.calendar-day-range-end {
	@include border-radius(50%);
	background: ion-color(primary, base);
	color: ion-color(primary, contrast);
	font-weight: 600;
	}
	// Single day range: both start and end, restore full circle
	:host .calendar-day.calendar-day-range-start.calendar-day-range-end {
	@include border-radius(50%);
	}
	// Range start and end: full circle
	:host .calendar-day.calendar-day-range-start,
	:host .calendar-day.calendar-day-range-end {
	@include border-radius(50%);
	background: ion-color(primary, base);
	color: ion-color(primary, contrast);
	font-weight: 600;
	}

[thetaPC]

• The design doc revisited this decision on purpose, so a user can't commit half a range, but no test covers it. Losing isRangeIncomplete would let a half range through without any test failing.
• Please add a test to test/range/datetime.e2e.ts:

    test('confirm button should be disabled until the range is complete', async () => {
      const datetime = await fixture.goto(config, [RANGE_START], { showDefaultButtons: true });
      const confirmButton = datetime.locator('#confirm-button button');

      await expect(confirmButton).toBeDisabled();

      await datetime.locator('[data-month="6"][data-day="18"]').click();
      await expect(confirmButton).toBeEnabled();
    });

[thetaPC]

• The startDate branch is range-only behavior from the design doc, but "reset should clear the range selection" only calls reset() with no argument.
• Please add a test to test/range/datetime.e2e.ts:

    test('reset with a date should clear the range and show that month', async ({ page }) => {
      const datetime = await fixture.goto(config, RANGE_VALUE);

      await datetime.evaluate((el: HTMLIonDatetimeElement) => el.reset('2022-12-01'));
      await page.waitForChanges();

      await expect(datetime.locator('.calendar-month-year-toggle')).toContainText('December 2022');
      await expect(datetime.locator('.calendar-day-range-start')).toHaveCount(0);
    });

[thetaPC]

• Picking a start date gives screen reader users no cue that an end date comes next. The design doc calls for an aria-live region that announces it.
• Days inside the range only announce their date, so a screen reader user can't tell which days fall between the start and end. The design doc conflicts on this: the Architecture section asks for an "in range" announcement, while the Requirements section only lists start and end. Please add it, or flag it and we'll update the design doc to match the PR.

[thetaPC]

Please restore toolbar-basic-text-icon-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png from next. It's unrelated to this PR and came back in after the revert. If that test then fails because the snapshot really does need updating, go ahead and update it.

[thetaPC]

• The ::before is an implementation detail, so naming it in the part description turns it into documented API. The docs should describe what the part is, like the other range-* parts do.

Suggested change

	* @part range-track - The calendar day wrapper element whose ::before pseudo-element draws the range highlight track.
	* @part range-track - The track that connects the start and end days of a range selection.