[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 28, 2026 11:14pm 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]

Suggested change

	/**
	* In range mode, clear the visible selection (including partial ranges)
	* so the component returns to an empty state. The value property is
	* left untouched, matching single/multiple mode behavior.
	*/
	if (this.isRangeMode) {
	this.activeParts = [];
	}

This seems like a big issue. Since #31558 came in from next, cancel() already restores the selection from value, but only once something was selected, so with nothing changed this clear sticks. Pressing Cancel on a confirmed range without touching anything erases it, and on reopen the header reads "Start date - End date", nothing is highlighted and Done is disabled, though value still holds the range. A partial range with no value still clears without this block.

This test fails with the block and passes without it:

    test('should keep the confirmed range when reopened after cancelling without changes', async ({ page }) => {
      await page.setContent(
        `
        <ion-modal>
          <ion-datetime locale="en-US" presentation="date" selection-mode="range" show-default-buttons="true"></ion-datetime>
        </ion-modal>
        <script>
          const datetime = document.querySelector('ion-datetime');
          datetime.value = ['2022-06-08', '2022-06-18'];
        </script>
      `,
        config
      );
      const modal = page.locator('ion-modal');
      const datetime = page.locator('ion-datetime');
      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');

      await modal.evaluate((el: HTMLIonModalElement) => el.present());
      await ionModalDidPresent.next();
      await datetime.locator('#cancel-button').click();
      await ionModalDidDismiss.next();
      await modal.evaluate((el: HTMLIonModalElement) => el.present());
      await ionModalDidPresent.next();

      await expect(datetime.locator('[data-month="6"][data-day="8"]')).toHaveClass(/calendar-day-range-start/);
      await expect(datetime.locator('[data-month="6"][data-day="18"]')).toHaveClass(/calendar-day-range-end/);
    });

[OS-susmitabhowmik]

Thanks for catching this! I removed the code block and added this test in 1cb5bb9

[ShaneK]

Suggested change

	:host(.datetime-disabled) .calendar-month-grid {
	opacity: 0.4;
	}
	:host(.datetime-disabled) .calendar-month-grid .calendar-day[disabled] {
	:host(.datetime-disabled.datetime-range) .calendar-month-grid {
	opacity: 0.4;
	}
	:host(.datetime-disabled.datetime-range) .calendar-month-grid .calendar-day[disabled] {

This fades every disabled datetime, not just ranges. The ionic theme already grays out disabled days with a color, so a plain disabled datetime in the ionic theme comes out a lot lighter than on next. Scoped to range mode, a disabled single date renders exactly like next on all three themes and the disabled range doesn't change.

Next:

This PR:

[OS-susmitabhowmik]

Great catch! I fixed this issue within 7aef96c and updated the Disabled test page to include the disabled range https://ionic-framework-git-rou-12704-datepicker-range-ionic1.vercel.app/src/components/datetime/test/disabled?ionic:theme=ionic

[ShaneK]

Suggested change

	test('confirm should not close overlay with incomplete range', async ({ page }) => {
	const datetime = await fixture.goto(config, undefined, { showDefaultButtons: true });
	const day8 = fixture.getVisibleDay(8);
	await day8.click();
	await page.waitForChanges();
	// Calling confirm with only start selected should not set value
	await datetime.evaluate((el: HTMLIonDatetimeElement) => el.confirm());
	await expect(datetime).toHaveJSProperty('value', undefined);
	});
	test('confirm should not close overlay with incomplete range', async ({ page }) => {
	await page.setContent(
	`
	<ion-modal>
	<ion-datetime locale="en-US" presentation="date" selection-mode="range"></ion-datetime>
	</ion-modal>
	<script>
	const datetime = document.querySelector('ion-datetime');
	datetime.value = ['2022-06-08'];
	</script>
	`,
	config
	);
	const modal = page.locator('ion-modal');
	const datetime = page.locator('ion-datetime');
	const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
	await modal.evaluate((el: HTMLIonModalElement) => el.present());
	await page.locator('.datetime-ready').waitFor();
	await datetime.evaluate((el: HTMLIonDatetimeElement) => el.confirm(true));
	await page.waitForChanges();
	// The modal is still open, so the range can be completed and confirmed.
	await datetime.locator('[data-month="6"][data-day="18"]').click();
	await datetime.evaluate((el: HTMLIonDatetimeElement) => el.confirm(true));
	await ionModalDidDismiss.next();
	expect(ionModalDidDismiss).toHaveReceivedEventTimes(1);
	await expect(datetime).toHaveJSProperty('value', RANGE_VALUE);
	});

This passes with or without the fix, since it never opens an overlay or passes closeOverlay. This version only passes if the first confirm(true) leaves the modal open.

[OS-susmitabhowmik]

Addressed this and the other test issues in these commits: 3a651d6 and 427636b

[ShaneK]

Suggested change

	const monthOption = page.locator('.month-column ion-picker-column-option').nth(0);
	const monthOption = page.locator('.month-column ion-picker-column-option').filter({ hasText: 'August' });

January is before the range, so picking it never changed value even with the old !this.multiple check, and this passes either way. August comes after the end, so it fails on the old code. Could you also add this test with selection-mode="multiple"? That fix doesn't have one yet.

[ShaneK]

Suggested change

	const yearOption = page.locator('.year-column ion-picker-column-option').nth(0);
	const yearOption = page.locator('.year-column ion-picker-column-option').filter({ hasText: '2023' });

Same here, the first year is before the range, so this passes on the old code too.

[ShaneK]

Suggested change

	await expect(day20).toHaveClass(/calendar-day-active/);
	await expect(day20).toHaveClass(/calendar-day-range-start/);

The end day gets calendar-day-active too, so this passes even if the range runs through the disabled 15th. Checking for the range start only passes when a new range starts.

[ShaneK]

Suggested change

	const disabledDay = { month: 6, day: 7, year: 2022 };
	const minParts = { month: 6, day: 9, year: 2022 };
	const disabledDay = { month: 6, day: 12, year: 2022 };
	const minParts = { month: 6, day: 13, year: 2022 };

Day 7 is outside the range, so this passes even without the !disabled check. The day 12 and min 13 setup from the comment puts the disabled day inside the range.