diff --git a/docs/api/datetime.md b/docs/api/datetime.md index ab856254cac..082d75358ba 100644 --- a/docs/api/datetime.md +++ b/docs/api/datetime.md @@ -31,6 +31,9 @@ import ShowingConfirmationButtons from '@site/static/usage/v7/datetime/buttons/s import CustomizingButtons from '@site/static/usage/v7/datetime/buttons/customizing-buttons/index.md'; import CustomizingButtonTexts from '@site/static/usage/v7/datetime/buttons/customizing-button-texts/index.md'; +import HighlightedDatesArray from '@site/static/usage/v7/datetime/highlightedDates/array/index.md'; +import HighlightedDatesCallback from '@site/static/usage/v7/datetime/highlightedDates/callback/index.md'; + import MultipleDateSelection from '@site/static/usage/v7/datetime/multiple/index.md'; import Theming from '@site/static/usage/v7/datetime/theming/index.md'; @@ -283,6 +286,30 @@ Developers can provide their own buttons for advanced custom behavior. +## Highlighting Specific Dates + +Using the `highlightedDates` property, developers can style particular dates with custom text or background colors. This property can be defined as either an array of dates and their colors, or a callback that receives an ISO string and returns the colors to use. + +When specifying colors, any valid CSS color format can be used. This includes hex codes, rgba, [color variables](../theming/colors), etc. + +To maintain a consistent user experience, the style of selected date(s) will always override custom highlights. + +:::note +This property is only supported when `preferWheel="false"`, and using a `presentation` of either `"date"`, `"date-time"`, or `"time-date"`. +::: + +### Using Array + +An array is better when the highlights apply to fixed dates, such as due dates. + + + +### Using Callback + +A callback is better when the highlighted dates are recurring, such as birthdays or recurring meetings. + + + ## Theming Ionic's powerful theming system can be used to easily change your entire app to match a certain theme. In this example, we used the [Color Creator](../theming/colors#new-color-creator) and the [Stepped Color Generator](../theming/themes#stepped-color-generator) to create a rose color palette that we can use for `ion-datetime`. diff --git a/static/usage/v6/datetime/highlightedDates/array/angular/example_component_html.md b/static/usage/v6/datetime/highlightedDates/array/angular/example_component_html.md new file mode 100644 index 00000000000..46de9b8c9a6 --- /dev/null +++ b/static/usage/v6/datetime/highlightedDates/array/angular/example_component_html.md @@ -0,0 +1,7 @@ +```html + +``` diff --git a/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md b/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md new file mode 100644 index 00000000000..4b46ab4c705 --- /dev/null +++ b/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md @@ -0,0 +1,32 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + highlightedDates = [ + { + date: '2023-01-05', + textColor: '#800080', + backgroundColor: '#ffc0cb', + }, + { + date: '2023-01-10', + textColor: '#09721b', + backgroundColor: '#c8e5d0', + }, + { + date: '2023-01-20', + textColor: 'var(--ion-color-secondary-contrast)', + backgroundColor: 'var(--ion-color-secondary)', + }, + { + date: '2023-01-23', + textColor: 'rgb(68, 10, 184)', + backgroundColor: 'rgb(211, 200, 229)' + } + ]; +} +``` diff --git a/static/usage/v6/datetime/highlightedDates/array/demo.html b/static/usage/v6/datetime/highlightedDates/array/demo.html new file mode 100644 index 00000000000..d8faeba5b8b --- /dev/null +++ b/static/usage/v6/datetime/highlightedDates/array/demo.html @@ -0,0 +1,55 @@ + + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + + + + \ No newline at end of file diff --git a/static/usage/v6/datetime/highlightedDates/array/index.md b/static/usage/v6/datetime/highlightedDates/array/index.md new file mode 100644 index 00000000000..6eb7c9ec130 --- /dev/null +++ b/static/usage/v6/datetime/highlightedDates/array/index.md @@ -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/v6/datetime/highlightedDates/array/javascript.md b/static/usage/v6/datetime/highlightedDates/array/javascript.md new file mode 100644 index 00000000000..5a702fbfab1 --- /dev/null +++ b/static/usage/v6/datetime/highlightedDates/array/javascript.md @@ -0,0 +1,29 @@ +```html + + + +``` diff --git a/static/usage/v6/datetime/highlightedDates/array/react.md b/static/usage/v6/datetime/highlightedDates/array/react.md new file mode 100644 index 00000000000..a9ef5c776d9 --- /dev/null +++ b/static/usage/v6/datetime/highlightedDates/array/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ( + + ); +} +export default Example; +``` diff --git a/static/usage/v6/datetime/highlightedDates/array/vue.md b/static/usage/v6/datetime/highlightedDates/array/vue.md new file mode 100644 index 00000000000..62dbec39055 --- /dev/null +++ b/static/usage/v6/datetime/highlightedDates/array/vue.md @@ -0,0 +1,44 @@ +```html + + + +``` diff --git a/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_html.md b/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_html.md new file mode 100644 index 00000000000..634090ab0ab --- /dev/null +++ b/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md b/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md new file mode 100644 index 00000000000..7186ae3cc64 --- /dev/null +++ b/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md @@ -0,0 +1,30 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + highlightedDates = (isoString) => { + const date = new Date(isoString); + const utcDay = date.getUTCDate(); + + if(utcDay % 5 === 0) { + return { + textColor: '#800080', + backgroundColor: '#ffc0cb', + }; + } + + if(utcDay % 3 === 0) { + return { + textColor: 'var(--ion-color-secondary-contrast)', + backgroundColor: 'var(--ion-color-secondary)', + }; + } + + return undefined; + }; +} +``` diff --git a/static/usage/v6/datetime/highlightedDates/callback/demo.html b/static/usage/v6/datetime/highlightedDates/callback/demo.html new file mode 100644 index 00000000000..50c62e09c5f --- /dev/null +++ b/static/usage/v6/datetime/highlightedDates/callback/demo.html @@ -0,0 +1,53 @@ + + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + + + + \ No newline at end of file diff --git a/static/usage/v6/datetime/highlightedDates/callback/index.md b/static/usage/v6/datetime/highlightedDates/callback/index.md new file mode 100644 index 00000000000..106ec4476e7 --- /dev/null +++ b/static/usage/v6/datetime/highlightedDates/callback/index.md @@ -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/v6/datetime/highlightedDates/callback/javascript.md b/static/usage/v6/datetime/highlightedDates/callback/javascript.md new file mode 100644 index 00000000000..270967cccd8 --- /dev/null +++ b/static/usage/v6/datetime/highlightedDates/callback/javascript.md @@ -0,0 +1,27 @@ +```html + + + +``` diff --git a/static/usage/v6/datetime/highlightedDates/callback/react.md b/static/usage/v6/datetime/highlightedDates/callback/react.md new file mode 100644 index 00000000000..6830e55eeff --- /dev/null +++ b/static/usage/v6/datetime/highlightedDates/callback/react.md @@ -0,0 +1,32 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ( + { + const date = new Date(isoString); + const utcDay = date.getUTCDate(); + + if(utcDay % 5 === 0) { + return { + textColor: '#800080', + backgroundColor: '#ffc0cb', + }; + } + + if(utcDay % 3 === 0) { + return { + textColor: 'var(--ion-color-secondary-contrast)', + backgroundColor: 'var(--ion-color-secondary)', + }; + } + + return undefined; + }} + > + ); +} +export default Example; +``` diff --git a/static/usage/v6/datetime/highlightedDates/callback/vue.md b/static/usage/v6/datetime/highlightedDates/callback/vue.md new file mode 100644 index 00000000000..54873e03eaa --- /dev/null +++ b/static/usage/v6/datetime/highlightedDates/callback/vue.md @@ -0,0 +1,38 @@ +```html + + + +``` diff --git a/static/usage/v7/datetime/highlightedDates/array/angular/example_component_html.md b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_html.md new file mode 100644 index 00000000000..46de9b8c9a6 --- /dev/null +++ b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_html.md @@ -0,0 +1,7 @@ +```html + +``` diff --git a/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md new file mode 100644 index 00000000000..4b46ab4c705 --- /dev/null +++ b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md @@ -0,0 +1,32 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + highlightedDates = [ + { + date: '2023-01-05', + textColor: '#800080', + backgroundColor: '#ffc0cb', + }, + { + date: '2023-01-10', + textColor: '#09721b', + backgroundColor: '#c8e5d0', + }, + { + date: '2023-01-20', + textColor: 'var(--ion-color-secondary-contrast)', + backgroundColor: 'var(--ion-color-secondary)', + }, + { + date: '2023-01-23', + textColor: 'rgb(68, 10, 184)', + backgroundColor: 'rgb(211, 200, 229)' + } + ]; +} +``` diff --git a/static/usage/v7/datetime/highlightedDates/array/demo.html b/static/usage/v7/datetime/highlightedDates/array/demo.html new file mode 100644 index 00000000000..d8faeba5b8b --- /dev/null +++ b/static/usage/v7/datetime/highlightedDates/array/demo.html @@ -0,0 +1,55 @@ + + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + + + + \ No newline at end of file diff --git a/static/usage/v7/datetime/highlightedDates/array/index.md b/static/usage/v7/datetime/highlightedDates/array/index.md new file mode 100644 index 00000000000..6438d84fcf3 --- /dev/null +++ b/static/usage/v7/datetime/highlightedDates/array/index.md @@ -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/v7/datetime/highlightedDates/array/javascript.md b/static/usage/v7/datetime/highlightedDates/array/javascript.md new file mode 100644 index 00000000000..5a702fbfab1 --- /dev/null +++ b/static/usage/v7/datetime/highlightedDates/array/javascript.md @@ -0,0 +1,29 @@ +```html + + + +``` diff --git a/static/usage/v7/datetime/highlightedDates/array/react.md b/static/usage/v7/datetime/highlightedDates/array/react.md new file mode 100644 index 00000000000..a9ef5c776d9 --- /dev/null +++ b/static/usage/v7/datetime/highlightedDates/array/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ( + + ); +} +export default Example; +``` diff --git a/static/usage/v7/datetime/highlightedDates/array/vue.md b/static/usage/v7/datetime/highlightedDates/array/vue.md new file mode 100644 index 00000000000..62dbec39055 --- /dev/null +++ b/static/usage/v7/datetime/highlightedDates/array/vue.md @@ -0,0 +1,44 @@ +```html + + + +``` diff --git a/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_html.md b/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_html.md new file mode 100644 index 00000000000..634090ab0ab --- /dev/null +++ b/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md b/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md new file mode 100644 index 00000000000..7186ae3cc64 --- /dev/null +++ b/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md @@ -0,0 +1,30 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + highlightedDates = (isoString) => { + const date = new Date(isoString); + const utcDay = date.getUTCDate(); + + if(utcDay % 5 === 0) { + return { + textColor: '#800080', + backgroundColor: '#ffc0cb', + }; + } + + if(utcDay % 3 === 0) { + return { + textColor: 'var(--ion-color-secondary-contrast)', + backgroundColor: 'var(--ion-color-secondary)', + }; + } + + return undefined; + }; +} +``` diff --git a/static/usage/v7/datetime/highlightedDates/callback/demo.html b/static/usage/v7/datetime/highlightedDates/callback/demo.html new file mode 100644 index 00000000000..50c62e09c5f --- /dev/null +++ b/static/usage/v7/datetime/highlightedDates/callback/demo.html @@ -0,0 +1,53 @@ + + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + + + + \ No newline at end of file diff --git a/static/usage/v7/datetime/highlightedDates/callback/index.md b/static/usage/v7/datetime/highlightedDates/callback/index.md new file mode 100644 index 00000000000..106f90210cf --- /dev/null +++ b/static/usage/v7/datetime/highlightedDates/callback/index.md @@ -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/v7/datetime/highlightedDates/callback/javascript.md b/static/usage/v7/datetime/highlightedDates/callback/javascript.md new file mode 100644 index 00000000000..270967cccd8 --- /dev/null +++ b/static/usage/v7/datetime/highlightedDates/callback/javascript.md @@ -0,0 +1,27 @@ +```html + + + +``` diff --git a/static/usage/v7/datetime/highlightedDates/callback/react.md b/static/usage/v7/datetime/highlightedDates/callback/react.md new file mode 100644 index 00000000000..6830e55eeff --- /dev/null +++ b/static/usage/v7/datetime/highlightedDates/callback/react.md @@ -0,0 +1,32 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ( + { + const date = new Date(isoString); + const utcDay = date.getUTCDate(); + + if(utcDay % 5 === 0) { + return { + textColor: '#800080', + backgroundColor: '#ffc0cb', + }; + } + + if(utcDay % 3 === 0) { + return { + textColor: 'var(--ion-color-secondary-contrast)', + backgroundColor: 'var(--ion-color-secondary)', + }; + } + + return undefined; + }} + > + ); +} +export default Example; +``` diff --git a/static/usage/v7/datetime/highlightedDates/callback/vue.md b/static/usage/v7/datetime/highlightedDates/callback/vue.md new file mode 100644 index 00000000000..54873e03eaa --- /dev/null +++ b/static/usage/v7/datetime/highlightedDates/callback/vue.md @@ -0,0 +1,38 @@ +```html + + + +``` diff --git a/versioned_docs/version-v6/api/datetime.md b/versioned_docs/version-v6/api/datetime.md index 021146d87ff..a4f93b4655c 100644 --- a/versioned_docs/version-v6/api/datetime.md +++ b/versioned_docs/version-v6/api/datetime.md @@ -32,6 +32,9 @@ import ShowingConfirmationButtons from '@site/static/usage/v6/datetime/buttons/s import CustomizingButtons from '@site/static/usage/v6/datetime/buttons/customizing-buttons/index.md'; import CustomizingButtonTexts from '@site/static/usage/v6/datetime/buttons/customizing-button-texts/index.md'; +import HighlightedDatesArray from '@site/static/usage/v6/datetime/highlightedDates/array/index.md'; +import HighlightedDatesCallback from '@site/static/usage/v6/datetime/highlightedDates/callback/index.md'; + import MultipleDateSelection from '@site/static/usage/v6/datetime/multiple/index.md'; import Theming from '@site/static/usage/v6/datetime/theming/index.md'; @@ -286,6 +289,30 @@ Developers can provide their own buttons for advanced custom behavior. +## Highlighting Specific Dates + +Using the `highlightedDates` property, developers can style particular dates with custom text or background colors. This property can be defined as either an array of dates and their colors, or a callback that receives an ISO string and returns the colors to use. + +When specifying colors, any valid CSS color format can be used. This includes hex codes, rgba, [color variables](../theming/colors), etc. + +To maintain a consistent user experience, the style of selected date(s) will always override custom highlights. + +:::note +This property is only supported when `preferWheel="false"`, and using a `presentation` of either `"date"`, `"date-time"`, or `"time-date"`. +::: + +### Using Array + +An array is better when the highlights apply to fixed dates, such as due dates. + + + +### Using Callback + +A callback is better when the highlighted dates are recurring, such as birthdays or recurring meetings. + + + ## Theming Ionic's powerful theming system can be used to easily change your entire app to match a certain theme. In this example, we used the [Color Creator](../theming/colors#new-color-creator) and the [Stepped Color Generator](../theming/themes#stepped-color-generator) to create a rose color palette that we can use for `ion-datetime`.