diff --git a/docs/api/datetime.mdx b/docs/api/datetime.mdx index f7bcd34141..43e2bfec17 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. The `multiple` property is deprecated in favor of `selectionMode="multiple"`. :::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"`, 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. + +:::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 */} + +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. + + + ## 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 e26fe9e931..d807177367 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/demo.html b/static/usage/v10/datetime/multiple/demo.html index aff79d8ae1..50b65c4764 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 10455808ab..556b4470da 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 0000000000..5e27f66d99 --- /dev/null +++ b/static/usage/v10/datetime/range/index.mdx @@ -0,0 +1,25 @@ +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 0000000000..0ffb86c431 --- /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 0000000000..bd2edb4a0d --- /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 0000000000..e2e02c74de --- /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 0000000000..f9267215db --- /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 0000000000..0ffb86c431 --- /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 0000000000..778bf95459 --- /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 0000000000..7b62a37a6c --- /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 0000000000..84728aebf9 --- /dev/null +++ b/static/usage/v10/datetime/styling/range/index.mdx @@ -0,0 +1,35 @@ +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 0000000000..cfc197a03c --- /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 0000000000..f9267215db --- /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 0000000000..8f1adeca3e --- /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 0000000000..8bbd881116 --- /dev/null +++ b/static/usage/v10/datetime/styling/range/vue.md @@ -0,0 +1,20 @@ +```vue + + + + + +```