diff --git a/docs/api/datetime.md b/docs/api/datetime.md index 252d8c8d94..ff7a5a95da 100644 --- a/docs/api/datetime.md +++ b/docs/api/datetime.md @@ -43,6 +43,7 @@ import MultipleDateSelection from '@site/static/usage/v8/datetime/multiple/index import GlobalTheming from '@site/static/usage/v8/datetime/styling/global-theming/index.md'; import CalendarHeaderStyling from '@site/static/usage/v8/datetime/styling/calendar-header/index.md'; import CalendarDaysStyling from '@site/static/usage/v8/datetime/styling/calendar-days/index.md'; +import DatetimeHeaderStyling from '@site/static/usage/v8/datetime/styling/datetime-header/index.md'; import WheelStyling from '@site/static/usage/v8/datetime/styling/wheel-styling/index.md'; @@ -371,6 +372,16 @@ The example below selects the day 2 days ago, unless that day is in the previous +### Datetime Header + +The datetime header manages the content for the `title` slot and the selected date. + +:::note +The selected date will not render if `preferWheel` is set to `true`. +::: + + + ### Wheel Pickers The wheels used in `ion-datetime` can be styled through a combination of shadow parts and CSS variables. This applies to both the columns in wheel-style datetimes, and the month/year picker in grid-style datetimes. diff --git a/static/usage/v8/datetime/styling/calendar-header/angular/example_component_css.md b/static/usage/v8/datetime/styling/calendar-header/angular/example_component_css.md index f95379ddaa..ab447447cb 100644 --- a/static/usage/v8/datetime/styling/calendar-header/angular/example_component_css.md +++ b/static/usage/v8/datetime/styling/calendar-header/angular/example_component_css.md @@ -1,9 +1,30 @@ ```css /* - * Custom Datetime Calendar Header Part + * Custom Datetime Calendar Header Parts * ------------------------------------------- */ +ion-datetime::part(calendar-header) { + background-color: orange; +} + ion-datetime::part(month-year-button) { background-color: lightblue; } + +ion-datetime::part(prev-next-buttons) { + background-color: firebrick; +} + +ion-datetime::part(prev-button) { + color: white; +} + +ion-datetime::part(next-button) { + color: black; +} + +ion-datetime::part(days-of-week) { + background-color: #9ad162; + color: white; +} ``` diff --git a/static/usage/v8/datetime/styling/calendar-header/demo.html b/static/usage/v8/datetime/styling/calendar-header/demo.html index 331140d4bb..96c4861828 100644 --- a/static/usage/v8/datetime/styling/calendar-header/demo.html +++ b/static/usage/v8/datetime/styling/calendar-header/demo.html @@ -15,9 +15,30 @@ * ------------------------------------------- */ + ion-datetime::part(calendar-header) { + background-color: orange; + } + ion-datetime::part(month-year-button) { background-color: lightblue; } + + ion-datetime::part(prev-next-buttons) { + background-color: firebrick; + } + + ion-datetime::part(prev-button) { + color: white; + } + + ion-datetime::part(next-button) { + color: black; + } + + ion-datetime::part(days-of-week) { + background-color: #9ad162; + color: white; + } diff --git a/static/usage/v8/datetime/styling/calendar-header/javascript.md b/static/usage/v8/datetime/styling/calendar-header/javascript.md index fc936e5efe..4bd155c4f8 100644 --- a/static/usage/v8/datetime/styling/calendar-header/javascript.md +++ b/static/usage/v8/datetime/styling/calendar-header/javascript.md @@ -3,11 +3,32 @@ ``` diff --git a/static/usage/v8/datetime/styling/calendar-header/react/main_css.md b/static/usage/v8/datetime/styling/calendar-header/react/main_css.md index f95379ddaa..ab447447cb 100644 --- a/static/usage/v8/datetime/styling/calendar-header/react/main_css.md +++ b/static/usage/v8/datetime/styling/calendar-header/react/main_css.md @@ -1,9 +1,30 @@ ```css /* - * Custom Datetime Calendar Header Part + * Custom Datetime Calendar Header Parts * ------------------------------------------- */ +ion-datetime::part(calendar-header) { + background-color: orange; +} + ion-datetime::part(month-year-button) { background-color: lightblue; } + +ion-datetime::part(prev-next-buttons) { + background-color: firebrick; +} + +ion-datetime::part(prev-button) { + color: white; +} + +ion-datetime::part(next-button) { + color: black; +} + +ion-datetime::part(days-of-week) { + background-color: #9ad162; + color: white; +} ``` diff --git a/static/usage/v8/datetime/styling/calendar-header/vue.md b/static/usage/v8/datetime/styling/calendar-header/vue.md index 16b7da10a4..7dfd0f42ac 100644 --- a/static/usage/v8/datetime/styling/calendar-header/vue.md +++ b/static/usage/v8/datetime/styling/calendar-header/vue.md @@ -12,8 +12,29 @@ * Custom Datetime Calendar Header Part * ------------------------------------------- */ + ion-datetime::part(calendar-header) { + background-color: orange; + } + ion-datetime::part(month-year-button) { background-color: lightblue; } + + ion-datetime::part(prev-next-buttons) { + background-color: firebrick; + } + + ion-datetime::part(prev-button) { + color: white; + } + + ion-datetime::part(next-button) { + color: black; + } + + ion-datetime::part(days-of-week) { + background-color: #9ad162; + color: white; + } ``` diff --git a/static/usage/v8/datetime/styling/datetime-header/angular/example_component_css.md b/static/usage/v8/datetime/styling/datetime-header/angular/example_component_css.md new file mode 100644 index 0000000000..93733de0a9 --- /dev/null +++ b/static/usage/v8/datetime/styling/datetime-header/angular/example_component_css.md @@ -0,0 +1,9 @@ +```css +/* + * Custom Datetime Header Part + * ------------------------------------------- + */ +ion-datetime::part(datetime-header) { + background-color: orange; +} +``` diff --git a/static/usage/v8/datetime/styling/datetime-header/angular/example_component_html.md b/static/usage/v8/datetime/styling/datetime-header/angular/example_component_html.md new file mode 100644 index 0000000000..64b144ee4e --- /dev/null +++ b/static/usage/v8/datetime/styling/datetime-header/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html + + Select Date + +``` diff --git a/static/usage/v8/datetime/styling/datetime-header/angular/example_component_ts.md b/static/usage/v8/datetime/styling/datetime-header/angular/example_component_ts.md new file mode 100644 index 0000000000..75ed761f6e --- /dev/null +++ b/static/usage/v8/datetime/styling/datetime-header/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['./example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/datetime/styling/datetime-header/demo.html b/static/usage/v8/datetime/styling/datetime-header/demo.html new file mode 100644 index 0000000000..5f54a160ae --- /dev/null +++ b/static/usage/v8/datetime/styling/datetime-header/demo.html @@ -0,0 +1,35 @@ + + + + + + Datetime + + + + + + + + + + + +
+ + Select Date + +
+ + + + diff --git a/static/usage/v8/datetime/styling/datetime-header/index.md b/static/usage/v8/datetime/styling/datetime-header/index.md new file mode 100644 index 0000000000..db105f3fe6 --- /dev/null +++ b/static/usage/v8/datetime/styling/datetime-header/index.md @@ -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/v8/datetime/styling/datetime-header/javascript.md b/static/usage/v8/datetime/styling/datetime-header/javascript.md new file mode 100644 index 0000000000..4326b12444 --- /dev/null +++ b/static/usage/v8/datetime/styling/datetime-header/javascript.md @@ -0,0 +1,15 @@ +```html + + Select Date + + + +``` diff --git a/static/usage/v8/datetime/styling/datetime-header/react/main_css.md b/static/usage/v8/datetime/styling/datetime-header/react/main_css.md new file mode 100644 index 0000000000..93733de0a9 --- /dev/null +++ b/static/usage/v8/datetime/styling/datetime-header/react/main_css.md @@ -0,0 +1,9 @@ +```css +/* + * Custom Datetime Header Part + * ------------------------------------------- + */ +ion-datetime::part(datetime-header) { + background-color: orange; +} +``` diff --git a/static/usage/v8/datetime/styling/datetime-header/react/main_tsx.md b/static/usage/v8/datetime/styling/datetime-header/react/main_tsx.md new file mode 100644 index 0000000000..b1cf208846 --- /dev/null +++ b/static/usage/v8/datetime/styling/datetime-header/react/main_tsx.md @@ -0,0 +1,17 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + Select Date + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/datetime/styling/datetime-header/vue.md b/static/usage/v8/datetime/styling/datetime-header/vue.md new file mode 100644 index 0000000000..6c5e5d6b40 --- /dev/null +++ b/static/usage/v8/datetime/styling/datetime-header/vue.md @@ -0,0 +1,22 @@ +```html + + + + + +```