Skip to content

docs(datetime): add range selection playgrounds - #4824

Merged
OS-susmitabhowmik merged 10 commits into
major-10.0from
ROU-12704-date-range
Nov 9, 2026
Merged

OS-susmitabhowmik merged 10 commits into
major-10.0from
ROU-12704-date-range

Conversation

@OS-susmitabhowmik

@OS-susmitabhowmik OS-susmitabhowmik commented Nov 3, 2026 •

Copy link
Copy Markdown

Description

This PR adds the playgrounds for the ion-datetime range selection work done in ionic-team/ionic-framework#31581.

The following changes were added:

  • Adds documentation and playgrounds for the new selectionMode="range" feature on ion-datetime, including basic usage and styling examples across all frameworks (JavaScript, Angular, React, Vue)
  • Updates the existing multiple date selection docs and demos to use selectionMode="multiple" instead of the deprecated multiple boolean prop
  • Adds a range styling playground demonstrating --range-background, range-start, range-end CSS shadow parts

Testing

  • To test use the dev build version 9.0.11-dev.11793736984.1580a194 from https://github.com/ionic-team/ionic-framework/actions/runs/41710956887
  • Run npm start and verify the Range Selection playground renders correctly on the datetime docs page
  • Verify the Range Styling playground renders correctly with custom styling applied
  • Verify the Multiple Date Selection playground still works with selectionMode="multiple"
  • Confirm all framework tabs (JavaScript, Angular, React, Vue) show correct code snippets for both range and multiple demos

…electionMode

Add range and range styling playgrounds with presentation="date"
selection-mode="range". Update multiple date selection to use the new
selectionMode="multiple" property instead of the deprecated multiple
prop.
@OS-susmitabhowmik
OS-susmitabhowmik requested a review from a team as a code owner November 3, 2026 19:17
@OS-susmitabhowmik
OS-susmitabhowmik requested review from ShaneK and removed request for a team November 3, 2026 19:17
@vercel

vercel Bot commented Nov 3, 2026 •

Copy link
Copy Markdown

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

Project Deployment Actions Updated
ionic-docs Ready Ready Preview Nov 5, 2026 9:17pm UTC

Request Review

Comment thread docs/api/datetime.mdx Resolved
Comment thread docs/api/datetime.mdx Resolved
Comment thread docs/api/datetime.mdx Resolved
Use passive voice and "Clicking" to match surrounding sections. Clarify
that the range is the value (not "returned") and document disabled-date
behavior.
…ules

Border-radius rules break in RTL and the framework already handles
start/end circles. The range-track pseudo-element is internal and
should not be documented.

@thetaPC thetaPC left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@ShaneK ShaneK left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks really good so far! Just a couple of things on how range selection behaves.

Comment thread docs/api/datetime.mdx Resolved
Comment thread docs/api/datetime.mdx Resolved
Comment thread docs/api/datetime.mdx Resolved
…ection

Clarify range selection click behavior (before-start resets, after-
complete moves end), note that value/ionChange update only after both
dates are picked, accept partial [start] value, and add multiple
property deprecation note.

@ShaneK ShaneK left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@OS-susmitabhowmik
OS-susmitabhowmik merged commit 29beb04 into major-10.0 Nov 9, 2026
7 checks passed
@OS-susmitabhowmik
OS-susmitabhowmik deleted the ROU-12704-date-range branch November 9, 2026 17:06

This branch was successfully deployed

1 active deployment
Preview — 49e2b3b0 Deployed Nov 5, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants