From 9fa3bb06902d13a3b68c773481db37f7e685da6b Mon Sep 17 00:00:00 2001 From: Susmita Bhowmik Date: Mon, 2 Nov 2026 17:51:20 -0700 Subject: [PATCH 01/10] docs(datetime): add range selection docs and update multiple to use selectionMode 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. --- docs/api/datetime.mdx | 25 +++++++++++++- .../angular/example_component_html.md | 2 +- static/usage/v10/datetime/multiple/demo.html | 2 +- .../usage/v10/datetime/multiple/javascript.md | 2 +- static/usage/v10/datetime/multiple/react.md | 2 +- static/usage/v10/datetime/multiple/vue.md | 2 +- .../range/angular/example_component_html.md | 3 ++ .../range/angular/example_component_ts.md | 12 +++++++ static/usage/v10/datetime/range/demo.html | 22 ++++++++++++ static/usage/v10/datetime/range/index.mdx | 24 +++++++++++++ static/usage/v10/datetime/range/javascript.md | 3 ++ static/usage/v10/datetime/range/react.md | 13 +++++++ static/usage/v10/datetime/range/vue.md | 9 +++++ .../range/angular/example_component_css.md | 10 ++++++ .../range/angular/example_component_html.md | 3 ++ .../range/angular/example_component_ts.md | 12 +++++++ .../v10/datetime/styling/range/demo.html | 33 ++++++++++++++++++ .../v10/datetime/styling/range/index.mdx | 34 +++++++++++++++++++ .../v10/datetime/styling/range/javascript.md | 14 ++++++++ .../datetime/styling/range/react/main_css.md | 10 ++++++ .../datetime/styling/range/react/main_tsx.md | 15 ++++++++ .../usage/v10/datetime/styling/range/vue.md | 20 +++++++++++ 22 files changed, 266 insertions(+), 6 deletions(-) create mode 100644 static/usage/v10/datetime/range/angular/example_component_html.md create mode 100644 static/usage/v10/datetime/range/angular/example_component_ts.md create mode 100644 static/usage/v10/datetime/range/demo.html create mode 100644 static/usage/v10/datetime/range/index.mdx create mode 100644 static/usage/v10/datetime/range/javascript.md create mode 100644 static/usage/v10/datetime/range/react.md create mode 100644 static/usage/v10/datetime/range/vue.md create mode 100644 static/usage/v10/datetime/styling/range/angular/example_component_css.md create mode 100644 static/usage/v10/datetime/styling/range/angular/example_component_html.md create mode 100644 static/usage/v10/datetime/styling/range/angular/example_component_ts.md create mode 100644 static/usage/v10/datetime/styling/range/demo.html create mode 100644 static/usage/v10/datetime/styling/range/index.mdx create mode 100644 static/usage/v10/datetime/styling/range/javascript.md create mode 100644 static/usage/v10/datetime/styling/range/react/main_css.md create mode 100644 static/usage/v10/datetime/styling/range/react/main_tsx.md create mode 100644 static/usage/v10/datetime/styling/range/vue.md diff --git a/docs/api/datetime.mdx b/docs/api/datetime.mdx index f7bcd341417..4ce1735845a 100644 --- a/docs/api/datetime.mdx +++ b/docs/api/datetime.mdx @@ -41,11 +41,14 @@ import ShowAdjacentDays from '@site/static/usage/v10/datetime/show-adjacent-days import MultipleDateSelection from '@site/static/usage/v10/datetime/multiple/index.mdx'; +import Range from '@site/static/usage/v10/datetime/range/index.mdx'; + import GlobalTheming from '@site/static/usage/v10/datetime/styling/global-theming/index.mdx'; import CalendarHeaderStyling from '@site/static/usage/v10/datetime/styling/calendar-header/index.mdx'; import CalendarDaysStyling from '@site/static/usage/v10/datetime/styling/calendar-days/index.mdx'; import DatetimeHeaderStyling from '@site/static/usage/v10/datetime/styling/datetime-header/index.mdx'; import WheelStyling from '@site/static/usage/v10/datetime/styling/wheel-styling/index.mdx'; +import RangeStyling from '@site/static/usage/v10/datetime/styling/range/index.mdx'; ion-datetime: Ionic API Input for Datetime Format Picker @@ -279,7 +282,7 @@ This property is only supported when using `presentation="date"` and `preferWhee ## Multiple Date Selection {/* #multiple-date-selection */} -If the `multiple` property is set to `true`, multiple dates can be selected from the calendar picker. Clicking a selected date will deselect it. +If the `selectionMode` property is set to `"multiple"`, multiple dates can be selected from the calendar picker. Clicking a selected date will deselect it. :::note @@ -289,6 +292,20 @@ This property is only supported when using `presentation="date"` and `preferWhee +## Range Selection {/* #range-selection */} + +If the `selectionMode` property is set to `"range"`, users can select a range of dates from the calendar picker. The selected range is returned as an array of two ISO 8601 date strings: `[start, end]`. Tapping a date sets the start of the range, and tapping another date sets the end. + +The `startDateLabel` and `endDateLabel` properties can be used to customize the labels shown for the start and end dates in the datetime header. + +:::note + +This property is only supported when using `presentation="date"` and `preferWheel="false"`. + +::: + + + ## Titles {/* #titles */} By default, `ion-datetime` does not show any header or title associated with the component. Developers can use the `showDefaultTitle` property to show the default title/header configuration. They can also use the `title` slot to customize what is rendered in the header. @@ -409,6 +426,12 @@ The wheels used in `ion-datetime` can be styled through a combination of shadow +### Range Selection {/* #range-selection-styling */} + +When `selectionMode="range"` is used, the selected range can be styled using the `--range-background` CSS custom property and the `range-start`, `range-end`, `range-selection`, and `range-track` CSS shadow parts. + + + ## Time Zones {/* #time-zones */} Ionic's `ion-datetime` follows the [datetime-local](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local) behavior of not manipulating or setting the time zone inside of a datetime control. In other words, a time value of "07:00" will not be adjusted according to different time zones. diff --git a/static/usage/v10/datetime/multiple/angular/example_component_html.md b/static/usage/v10/datetime/multiple/angular/example_component_html.md index e26fe9e931d..07c0ec57394 100644 --- a/static/usage/v10/datetime/multiple/angular/example_component_html.md +++ b/static/usage/v10/datetime/multiple/angular/example_component_html.md @@ -1,3 +1,3 @@ ```html - + ``` diff --git a/static/usage/v10/datetime/multiple/demo.html b/static/usage/v10/datetime/multiple/demo.html index aff79d8ae1f..50b65c47643 100644 --- a/static/usage/v10/datetime/multiple/demo.html +++ b/static/usage/v10/datetime/multiple/demo.html @@ -19,7 +19,7 @@
- +
diff --git a/static/usage/v10/datetime/multiple/javascript.md b/static/usage/v10/datetime/multiple/javascript.md index 10455808ab2..556b4470daf 100644 --- a/static/usage/v10/datetime/multiple/javascript.md +++ b/static/usage/v10/datetime/multiple/javascript.md @@ -1,5 +1,5 @@ ```html - + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v10/datetime/range/index.mdx b/static/usage/v10/datetime/range/index.mdx new file mode 100644 index 00000000000..43767f3e475 --- /dev/null +++ b/static/usage/v10/datetime/range/index.mdx @@ -0,0 +1,24 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v10/datetime/range/javascript.md b/static/usage/v10/datetime/range/javascript.md new file mode 100644 index 00000000000..0ffb86c4313 --- /dev/null +++ b/static/usage/v10/datetime/range/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v10/datetime/range/react.md b/static/usage/v10/datetime/range/react.md new file mode 100644 index 00000000000..bd2edb4a0dc --- /dev/null +++ b/static/usage/v10/datetime/range/react.md @@ -0,0 +1,13 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; + +function Example() { + return ( + <> + + + ); +} +export default Example; +``` diff --git a/static/usage/v10/datetime/range/vue.md b/static/usage/v10/datetime/range/vue.md new file mode 100644 index 00000000000..f347b670bb3 --- /dev/null +++ b/static/usage/v10/datetime/range/vue.md @@ -0,0 +1,9 @@ +```vue + + + +``` diff --git a/static/usage/v10/datetime/styling/range/angular/example_component_css.md b/static/usage/v10/datetime/styling/range/angular/example_component_css.md new file mode 100644 index 00000000000..f9267215db1 --- /dev/null +++ b/static/usage/v10/datetime/styling/range/angular/example_component_css.md @@ -0,0 +1,10 @@ +```css +ion-datetime { + --range-background: rgb(235, 68, 90, 0.1); +} + +ion-datetime::part(range-start), +ion-datetime::part(range-end) { + background: rgb(235, 68, 90); +} +``` diff --git a/static/usage/v10/datetime/styling/range/angular/example_component_html.md b/static/usage/v10/datetime/styling/range/angular/example_component_html.md new file mode 100644 index 00000000000..0ffb86c4313 --- /dev/null +++ b/static/usage/v10/datetime/styling/range/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v10/datetime/styling/range/angular/example_component_ts.md b/static/usage/v10/datetime/styling/range/angular/example_component_ts.md new file mode 100644 index 00000000000..778bf954597 --- /dev/null +++ b/static/usage/v10/datetime/styling/range/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['./example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v10/datetime/styling/range/demo.html b/static/usage/v10/datetime/styling/range/demo.html new file mode 100644 index 00000000000..5fcb9aabe9f --- /dev/null +++ b/static/usage/v10/datetime/styling/range/demo.html @@ -0,0 +1,33 @@ + + + + + + Datetime + + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v10/datetime/styling/range/index.mdx b/static/usage/v10/datetime/styling/range/index.mdx new file mode 100644 index 00000000000..e9cfb7d40ff --- /dev/null +++ b/static/usage/v10/datetime/styling/range/index.mdx @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v10/datetime/styling/range/javascript.md b/static/usage/v10/datetime/styling/range/javascript.md new file mode 100644 index 00000000000..cfc197a03c6 --- /dev/null +++ b/static/usage/v10/datetime/styling/range/javascript.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v10/datetime/styling/range/react/main_css.md b/static/usage/v10/datetime/styling/range/react/main_css.md new file mode 100644 index 00000000000..f9267215db1 --- /dev/null +++ b/static/usage/v10/datetime/styling/range/react/main_css.md @@ -0,0 +1,10 @@ +```css +ion-datetime { + --range-background: rgb(235, 68, 90, 0.1); +} + +ion-datetime::part(range-start), +ion-datetime::part(range-end) { + background: rgb(235, 68, 90); +} +``` diff --git a/static/usage/v10/datetime/styling/range/react/main_tsx.md b/static/usage/v10/datetime/styling/range/react/main_tsx.md new file mode 100644 index 00000000000..8f1adeca3e2 --- /dev/null +++ b/static/usage/v10/datetime/styling/range/react/main_tsx.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + ); +} +export default Example; +``` diff --git a/static/usage/v10/datetime/styling/range/vue.md b/static/usage/v10/datetime/styling/range/vue.md new file mode 100644 index 00000000000..e8d0930c957 --- /dev/null +++ b/static/usage/v10/datetime/styling/range/vue.md @@ -0,0 +1,20 @@ +```vue + + + + + +``` From 0f5811dc2ee05b519e24306ddb6e72d290586cf0 Mon Sep 17 00:00:00 2001 From: Susmita Bhowmik Date: Tue, 3 Nov 2026 12:01:24 -0700 Subject: [PATCH 02/10] chore(lint): format datetime range and multiple demo files --- .../multiple/angular/example_component_html.md | 6 +++++- static/usage/v10/datetime/multiple/vue.md | 6 +++++- static/usage/v10/datetime/range/demo.html | 2 +- static/usage/v10/datetime/range/vue.md | 2 +- .../usage/v10/datetime/styling/range/demo.html | 2 +- static/usage/v10/datetime/styling/range/vue.md | 16 ++++++++-------- 6 files changed, 21 insertions(+), 13 deletions(-) diff --git a/static/usage/v10/datetime/multiple/angular/example_component_html.md b/static/usage/v10/datetime/multiple/angular/example_component_html.md index 07c0ec57394..d8071773677 100644 --- a/static/usage/v10/datetime/multiple/angular/example_component_html.md +++ b/static/usage/v10/datetime/multiple/angular/example_component_html.md @@ -1,3 +1,7 @@ ```html - + ``` diff --git a/static/usage/v10/datetime/multiple/vue.md b/static/usage/v10/datetime/multiple/vue.md index a3d48887658..c2656667818 100644 --- a/static/usage/v10/datetime/multiple/vue.md +++ b/static/usage/v10/datetime/multiple/vue.md @@ -1,6 +1,10 @@ ```html ``` diff --git a/static/usage/v10/datetime/styling/range/demo.html b/static/usage/v10/datetime/styling/range/demo.html index 5fcb9aabe9f..01af84ea940 100644 --- a/static/usage/v10/datetime/styling/range/demo.html +++ b/static/usage/v10/datetime/styling/range/demo.html @@ -1,4 +1,4 @@ - + diff --git a/static/usage/v10/datetime/styling/range/vue.md b/static/usage/v10/datetime/styling/range/vue.md index e8d0930c957..8bbd8811167 100644 --- a/static/usage/v10/datetime/styling/range/vue.md +++ b/static/usage/v10/datetime/styling/range/vue.md @@ -4,17 +4,17 @@ ``` From 675ce2722479a5189a644fda06e37e06ef2baf83 Mon Sep 17 00:00:00 2001 From: Susmita Bhowmik Date: Tue, 3 Nov 2026 12:15:13 -0700 Subject: [PATCH 03/10] docs(datetime): add full range styling examples with border-radius and track height --- .../range/angular/example_component_css.md | 16 ++++++++++++++++ .../usage/v10/datetime/styling/range/demo.html | 16 ++++++++++++++++ .../v10/datetime/styling/range/javascript.md | 16 ++++++++++++++++ .../v10/datetime/styling/range/react/main_css.md | 16 ++++++++++++++++ static/usage/v10/datetime/styling/range/vue.md | 16 ++++++++++++++++ 5 files changed, 80 insertions(+) diff --git a/static/usage/v10/datetime/styling/range/angular/example_component_css.md b/static/usage/v10/datetime/styling/range/angular/example_component_css.md index f9267215db1..395ce8e8ce3 100644 --- a/static/usage/v10/datetime/styling/range/angular/example_component_css.md +++ b/static/usage/v10/datetime/styling/range/angular/example_component_css.md @@ -7,4 +7,20 @@ ion-datetime::part(range-start), ion-datetime::part(range-end) { background: rgb(235, 68, 90); } + +ion-datetime::part(range-start) { + border-radius: 32px 0 0 32px; +} + +ion-datetime::part(range-end) { + border-radius: 0 32px 32px 0; +} + +ion-datetime::part(range-start range-end) { + border-radius: 50%; +} + +ion-datetime::part(range-track)::before { + height: 24px; +} ``` diff --git a/static/usage/v10/datetime/styling/range/demo.html b/static/usage/v10/datetime/styling/range/demo.html index 01af84ea940..eba26778938 100644 --- a/static/usage/v10/datetime/styling/range/demo.html +++ b/static/usage/v10/datetime/styling/range/demo.html @@ -18,6 +18,22 @@ ion-datetime::part(range-end) { background: rgb(235, 68, 90); } + + ion-datetime::part(range-start) { + border-radius: 32px 0 0 32px; + } + + ion-datetime::part(range-end) { + border-radius: 0 32px 32px 0; + } + + ion-datetime::part(range-start range-end) { + border-radius: 50%; + } + + ion-datetime::part(range-track)::before { + height: 24px; + } diff --git a/static/usage/v10/datetime/styling/range/javascript.md b/static/usage/v10/datetime/styling/range/javascript.md index cfc197a03c6..a02d501dd73 100644 --- a/static/usage/v10/datetime/styling/range/javascript.md +++ b/static/usage/v10/datetime/styling/range/javascript.md @@ -10,5 +10,21 @@ ion-datetime::part(range-end) { background: rgb(235, 68, 90); } + + ion-datetime::part(range-start) { + border-radius: 32px 0 0 32px; + } + + ion-datetime::part(range-end) { + border-radius: 0 32px 32px 0; + } + + ion-datetime::part(range-start range-end) { + border-radius: 50%; + } + + ion-datetime::part(range-track)::before { + height: 24px; + } ``` diff --git a/static/usage/v10/datetime/styling/range/react/main_css.md b/static/usage/v10/datetime/styling/range/react/main_css.md index f9267215db1..395ce8e8ce3 100644 --- a/static/usage/v10/datetime/styling/range/react/main_css.md +++ b/static/usage/v10/datetime/styling/range/react/main_css.md @@ -7,4 +7,20 @@ ion-datetime::part(range-start), ion-datetime::part(range-end) { background: rgb(235, 68, 90); } + +ion-datetime::part(range-start) { + border-radius: 32px 0 0 32px; +} + +ion-datetime::part(range-end) { + border-radius: 0 32px 32px 0; +} + +ion-datetime::part(range-start range-end) { + border-radius: 50%; +} + +ion-datetime::part(range-track)::before { + height: 24px; +} ``` diff --git a/static/usage/v10/datetime/styling/range/vue.md b/static/usage/v10/datetime/styling/range/vue.md index 8bbd8811167..8878c38689d 100644 --- a/static/usage/v10/datetime/styling/range/vue.md +++ b/static/usage/v10/datetime/styling/range/vue.md @@ -16,5 +16,21 @@ ion-datetime::part(range-start), ion-datetime::part(range-end) { background: rgb(235, 68, 90); } + +ion-datetime::part(range-start) { + border-radius: 32px 0 0 32px; +} + +ion-datetime::part(range-end) { + border-radius: 0 32px 32px 0; +} + +ion-datetime::part(range-start range-end) { + border-radius: 50%; +} + +ion-datetime::part(range-track)::before { + height: 24px; +} ``` From a8564b9f3a6fb715e13dbbfee394edacc5eaa79a Mon Sep 17 00:00:00 2001 From: Susmita Bhowmik Date: Tue, 3 Nov 2026 17:41:40 -0700 Subject: [PATCH 04/10] docs(datetime): fix range selection wording to match doc conventions Use passive voice and "Clicking" to match surrounding sections. Clarify that the range is the value (not "returned") and document disabled-date behavior. --- docs/api/datetime.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/api/datetime.mdx b/docs/api/datetime.mdx index 4ce1735845a..d51c78d6fdf 100644 --- a/docs/api/datetime.mdx +++ b/docs/api/datetime.mdx @@ -294,9 +294,9 @@ This property is only supported when using `presentation="date"` and `preferWhee ## Range Selection {/* #range-selection */} -If the `selectionMode` property is set to `"range"`, users can select a range of dates from the calendar picker. The selected range is returned as an array of two ISO 8601 date strings: `[start, end]`. Tapping a date sets the start of the range, and tapping another date sets the end. +If the `selectionMode` property is set to `"range"`, a range of dates can be selected from the calendar picker. Clicking a date sets the start of the range, and clicking another date sets the end. The `value` is an array of two ISO 8601 strings, `[start, end]`. A range can't include a disabled date, so clicking a date past one starts a new range instead. -The `startDateLabel` and `endDateLabel` properties can be used to customize the labels shown for the start and end dates in the datetime header. +The `startDateLabel` and `endDateLabel` properties customize the placeholder text in the header when `showDefaultTitle` is enabled, and the labels screen readers announce on the start and end days. Set them to translate these labels. :::note From bd8e7b93342955050f2847f2ae6f905aa514e515 Mon Sep 17 00:00:00 2001 From: Susmita Bhowmik Date: Tue, 3 Nov 2026 17:50:02 -0700 Subject: [PATCH 05/10] fix(datetime): use @ionic/core@9 in range demo files until v10 is published --- static/usage/v10/datetime/range/demo.html | 4 ++-- static/usage/v10/datetime/styling/range/demo.html | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/static/usage/v10/datetime/range/demo.html b/static/usage/v10/datetime/range/demo.html index 6a4259da103..313469506cd 100644 --- a/static/usage/v10/datetime/range/demo.html +++ b/static/usage/v10/datetime/range/demo.html @@ -6,8 +6,8 @@ Datetime - - + + diff --git a/static/usage/v10/datetime/styling/range/demo.html b/static/usage/v10/datetime/styling/range/demo.html index eba26778938..a0fda0a7a4f 100644 --- a/static/usage/v10/datetime/styling/range/demo.html +++ b/static/usage/v10/datetime/styling/range/demo.html @@ -6,8 +6,8 @@ Datetime - - + + diff --git a/static/usage/v10/datetime/styling/range/javascript.md b/static/usage/v10/datetime/styling/range/javascript.md index a02d501dd73..c1c118fbb9f 100644 --- a/static/usage/v10/datetime/styling/range/javascript.md +++ b/static/usage/v10/datetime/styling/range/javascript.md @@ -11,20 +11,5 @@ background: rgb(235, 68, 90); } - ion-datetime::part(range-start) { - border-radius: 32px 0 0 32px; - } - - ion-datetime::part(range-end) { - border-radius: 0 32px 32px 0; - } - - ion-datetime::part(range-start range-end) { - border-radius: 50%; - } - - ion-datetime::part(range-track)::before { - height: 24px; - } ``` diff --git a/static/usage/v10/datetime/styling/range/react/main_css.md b/static/usage/v10/datetime/styling/range/react/main_css.md index 395ce8e8ce3..66015edb044 100644 --- a/static/usage/v10/datetime/styling/range/react/main_css.md +++ b/static/usage/v10/datetime/styling/range/react/main_css.md @@ -8,19 +8,4 @@ ion-datetime::part(range-end) { background: rgb(235, 68, 90); } -ion-datetime::part(range-start) { - border-radius: 32px 0 0 32px; -} - -ion-datetime::part(range-end) { - border-radius: 0 32px 32px 0; -} - -ion-datetime::part(range-start range-end) { - border-radius: 50%; -} - -ion-datetime::part(range-track)::before { - height: 24px; -} ``` diff --git a/static/usage/v10/datetime/styling/range/vue.md b/static/usage/v10/datetime/styling/range/vue.md index 8878c38689d..045098a1b3b 100644 --- a/static/usage/v10/datetime/styling/range/vue.md +++ b/static/usage/v10/datetime/styling/range/vue.md @@ -17,20 +17,5 @@ ion-datetime::part(range-end) { background: rgb(235, 68, 90); } -ion-datetime::part(range-start) { - border-radius: 32px 0 0 32px; -} - -ion-datetime::part(range-end) { - border-radius: 0 32px 32px 0; -} - -ion-datetime::part(range-start range-end) { - border-radius: 50%; -} - -ion-datetime::part(range-track)::before { - height: 24px; -} ``` From e54ede602f11cc8235e08be9698d00cdf8bbf0b7 Mon Sep 17 00:00:00 2001 From: Susmita Bhowmik Date: Tue, 3 Nov 2026 18:05:40 -0700 Subject: [PATCH 08/10] docs(datetime): simplify range styling section description --- docs/api/datetime.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api/datetime.mdx b/docs/api/datetime.mdx index d51c78d6fdf..49cb3e45542 100644 --- a/docs/api/datetime.mdx +++ b/docs/api/datetime.mdx @@ -428,7 +428,7 @@ The wheels used in `ion-datetime` can be styled through a combination of shadow ### Range Selection {/* #range-selection-styling */} -When `selectionMode="range"` is used, the selected range can be styled using the `--range-background` CSS custom property and the `range-start`, `range-end`, `range-selection`, and `range-track` CSS shadow parts. +The range selection in a grid-style `ion-datetime` is made up of the start and end days and the track that connects them. It can be styled through a combination of shadow parts and CSS variables. From 4eaf8df7ae2f83ec66607166f8c3a735dd0140ab Mon Sep 17 00:00:00 2001 From: Susmita Bhowmik Date: Tue, 3 Nov 2026 18:48:08 -0700 Subject: [PATCH 09/10] fix(datetime): remove trailing blank lines in range styling demos --- .../v10/datetime/styling/range/angular/example_component_css.md | 1 - static/usage/v10/datetime/styling/range/demo.html | 1 - static/usage/v10/datetime/styling/range/javascript.md | 1 - static/usage/v10/datetime/styling/range/react/main_css.md | 1 - static/usage/v10/datetime/styling/range/vue.md | 1 - 5 files changed, 5 deletions(-) diff --git a/static/usage/v10/datetime/styling/range/angular/example_component_css.md b/static/usage/v10/datetime/styling/range/angular/example_component_css.md index 66015edb044..f9267215db1 100644 --- a/static/usage/v10/datetime/styling/range/angular/example_component_css.md +++ b/static/usage/v10/datetime/styling/range/angular/example_component_css.md @@ -7,5 +7,4 @@ ion-datetime::part(range-start), ion-datetime::part(range-end) { background: rgb(235, 68, 90); } - ``` diff --git a/static/usage/v10/datetime/styling/range/demo.html b/static/usage/v10/datetime/styling/range/demo.html index 9a62b101e14..7b62a37a6c3 100644 --- a/static/usage/v10/datetime/styling/range/demo.html +++ b/static/usage/v10/datetime/styling/range/demo.html @@ -18,7 +18,6 @@ ion-datetime::part(range-end) { background: rgb(235, 68, 90); } - diff --git a/static/usage/v10/datetime/styling/range/javascript.md b/static/usage/v10/datetime/styling/range/javascript.md index c1c118fbb9f..cfc197a03c6 100644 --- a/static/usage/v10/datetime/styling/range/javascript.md +++ b/static/usage/v10/datetime/styling/range/javascript.md @@ -10,6 +10,5 @@ ion-datetime::part(range-end) { background: rgb(235, 68, 90); } - ``` diff --git a/static/usage/v10/datetime/styling/range/react/main_css.md b/static/usage/v10/datetime/styling/range/react/main_css.md index 66015edb044..f9267215db1 100644 --- a/static/usage/v10/datetime/styling/range/react/main_css.md +++ b/static/usage/v10/datetime/styling/range/react/main_css.md @@ -7,5 +7,4 @@ ion-datetime::part(range-start), ion-datetime::part(range-end) { background: rgb(235, 68, 90); } - ``` diff --git a/static/usage/v10/datetime/styling/range/vue.md b/static/usage/v10/datetime/styling/range/vue.md index 045098a1b3b..8bbd8811167 100644 --- a/static/usage/v10/datetime/styling/range/vue.md +++ b/static/usage/v10/datetime/styling/range/vue.md @@ -16,6 +16,5 @@ ion-datetime::part(range-start), ion-datetime::part(range-end) { background: rgb(235, 68, 90); } - ``` From 49e2b3b09b549d58e83995c01761d35ffff54064 Mon Sep 17 00:00:00 2001 From: Susmita Bhowmik Date: Thu, 5 Nov 2026 14:14:44 -0700 Subject: [PATCH 10/10] docs(datetime): address PR review feedback for range and multiple selection 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. --- docs/api/datetime.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/api/datetime.mdx b/docs/api/datetime.mdx index 49cb3e45542..43e2bfec172 100644 --- a/docs/api/datetime.mdx +++ b/docs/api/datetime.mdx @@ -282,7 +282,7 @@ This property is only supported when using `presentation="date"` and `preferWhee ## Multiple Date Selection {/* #multiple-date-selection */} -If the `selectionMode` property is set to `"multiple"`, multiple dates can be selected from the calendar picker. Clicking a selected date will deselect it. +If the `selectionMode` property is set to `"multiple"`, multiple dates can be selected from the calendar picker. Clicking a selected date will deselect it. The `multiple` property is deprecated in favor of `selectionMode="multiple"`. :::note @@ -294,7 +294,7 @@ This property is only supported when using `presentation="date"` and `preferWhee ## Range Selection {/* #range-selection */} -If the `selectionMode` property is set to `"range"`, a range of dates can be selected from the calendar picker. Clicking a date sets the start of the range, and clicking another date sets the end. The `value` is an array of two ISO 8601 strings, `[start, end]`. A range can't include a disabled date, so clicking a date past one starts a new range instead. +If the `selectionMode` property is set to `"range"`, a range of dates can be selected from the calendar picker. Clicking a date sets the start of the range, and clicking a later date sets the end. If the second click falls before the start, a new range begins from that date. Once both dates are set, clicking a date on or after the start moves the end of the range. The `value` is an array of ISO 8601 strings representing the range: `[start, end]` for a complete range or `[start]` for a partial one. The `value` and `ionChange` event only update once both dates are picked. When `showDefaultButtons` is enabled, the confirm button stays disabled until the range is complete. A range can't include a disabled date, so clicking a date past one starts a new range instead. The `startDateLabel` and `endDateLabel` properties customize the placeholder text in the header when `showDefaultTitle` is enabled, and the labels screen readers announce on the start and end days. Set them to translate these labels.