Skip to content

Commit 8036f63

Browse files
averyjohnstonaveryjohnston
authored
docs(datetime): add highlightedDates playgrounds (#2769)
1 parent e369a87 commit 8036f63

30 files changed

+924
-0
lines changed

‎docs/api/datetime.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,9 @@ import ShowingConfirmationButtons from '@site/static/usage/v7/datetime/buttons/s
3131
import CustomizingButtons from '@site/static/usage/v7/datetime/buttons/customizing-buttons/index.md';
3232
import CustomizingButtonTexts from '@site/static/usage/v7/datetime/buttons/customizing-button-texts/index.md';
3333

34+
import HighlightedDatesArray from '@site/static/usage/v7/datetime/highlightedDates/array/index.md';
35+
import HighlightedDatesCallback from '@site/static/usage/v7/datetime/highlightedDates/callback/index.md';
36+
3437
import MultipleDateSelection from '@site/static/usage/v7/datetime/multiple/index.md';
3538

3639
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.
283286

284287
<CustomizingButtons />
285288

289+
## Highlighting Specific Dates
290+
291+
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.
292+
293+
When specifying colors, any valid CSS color format can be used. This includes hex codes, rgba, [color variables](../theming/colors), etc.
294+
295+
To maintain a consistent user experience, the style of selected date(s) will always override custom highlights.
296+
297+
:::note
298+
This property is only supported when `preferWheel="false"`, and using a `presentation` of either `"date"`, `"date-time"`, or `"time-date"`.
299+
:::
300+
301+
### Using Array
302+
303+
An array is better when the highlights apply to fixed dates, such as due dates.
304+
305+
<HighlightedDatesArray />
306+
307+
### Using Callback
308+
309+
A callback is better when the highlighted dates are recurring, such as birthdays or recurring meetings.
310+
311+
<HighlightedDatesCallback />
312+
286313
## Theming
287314

288315
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`.

‎static/usage/v6/datetime/highlightedDates/array/angular/example_component_html.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
```html
2+
<ion-datetime
3+
presentation="date"
4+
value="2023-01-01"
5+
[highlightedDates]="highlightedDates"
6+
></ion-datetime>
7+
```

‎static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
4+
@Component({
5+
selector: 'app-example',
6+
templateUrl: 'example.component.html',
7+
})
8+
export class ExampleComponent {
9+
highlightedDates = [
10+
{
11+
date: '2023-01-05',
12+
textColor: '#800080',
13+
backgroundColor: '#ffc0cb',
14+
},
15+
{
16+
date: '2023-01-10',
17+
textColor: '#09721b',
18+
backgroundColor: '#c8e5d0',
19+
},
20+
{
21+
date: '2023-01-20',
22+
textColor: 'var(--ion-color-secondary-contrast)',
23+
backgroundColor: 'var(--ion-color-secondary)',
24+
},
25+
{
26+
date: '2023-01-23',
27+
textColor: 'rgb(68, 10, 184)',
28+
backgroundColor: 'rgb(211, 200, 229)'
29+
}
30+
];
31+
}
32+
```

‎static/usage/v6/datetime/highlightedDates/array/demo.html

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Datetime</title>
8+
<link rel="stylesheet" href="../../../../common.css" />
9+
<script src="../../../../common.js"></script>
10+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/[email protected]/dist/ionic/ionic.esm.js"></script>
11+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/[email protected]/css/ionic.bundle.css" />
12+
<style>
13+
ion-datetime {
14+
width: 350px;
15+
}
16+
</style>
17+
</head>
18+
19+
<body>
20+
<ion-app>
21+
<ion-content>
22+
<div class="container">
23+
<ion-datetime presentation="date" value="2023-01-01"></ion-datetime>
24+
</div>
25+
</ion-content>
26+
</ion-app>
27+
28+
<script>
29+
const datetime = document.querySelector('ion-datetime');
30+
datetime.highlightedDates = [
31+
{
32+
date: '2023-01-05',
33+
textColor: '#800080',
34+
backgroundColor: '#ffc0cb',
35+
},
36+
{
37+
date: '2023-01-10',
38+
textColor: '#09721b',
39+
backgroundColor: '#c8e5d0',
40+
},
41+
{
42+
date: '2023-01-20',
43+
textColor: 'var(--ion-color-secondary-contrast)',
44+
backgroundColor: 'var(--ion-color-secondary)',
45+
},
46+
{
47+
date: '2023-01-23',
48+
textColor: 'rgb(68, 10, 184)',
49+
backgroundColor: 'rgb(211, 200, 229)'
50+
}
51+
];
52+
</script>
53+
</body>
54+
55+
</html>

‎static/usage/v6/datetime/highlightedDates/array/index.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
import react from './react.md';
5+
import vue from './vue.md';
6+
7+
import angular_example_component_html from './angular/example_component_html.md';
8+
import angular_example_component_ts from './angular/example_component_ts.md';
9+
10+
<Playground
11+
size="medium"
12+
version={6}
13+
code={{
14+
javascript,
15+
react,
16+
vue,
17+
angular: {
18+
files: {
19+
'src/app/example.component.html': angular_example_component_html,
20+
'src/app/example.component.ts': angular_example_component_ts,
21+
},
22+
},
23+
}}
24+
src="usage/v6/datetime/highlightedDates/array/demo.html"
25+
/>

‎static/usage/v6/datetime/highlightedDates/array/javascript.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
```html
2+
<ion-datetime presentation="date" value="2023-01-01"></ion-datetime>
3+
4+
<script>
5+
var datetime = document.querySelector('ion-datetime');
6+
datetime.highlightedDates = [
7+
{
8+
date: '2023-01-05',
9+
textColor: '#800080',
10+
backgroundColor: '#ffc0cb',
11+
},
12+
{
13+
date: '2023-01-10',
14+
textColor: '#09721b',
15+
backgroundColor: '#c8e5d0',
16+
},
17+
{
18+
date: '2023-01-20',
19+
textColor: 'var(--ion-color-secondary-contrast)',
20+
backgroundColor: 'var(--ion-color-secondary)',
21+
},
22+
{
23+
date: '2023-01-23',
24+
textColor: 'rgb(68, 10, 184)',
25+
backgroundColor: 'rgb(211, 200, 229)'
26+
}
27+
];
28+
</script>
29+
```

‎static/usage/v6/datetime/highlightedDates/array/react.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonDatetime } from '@ionic/react';
4+
function Example() {
5+
return (
6+
<IonDatetime
7+
presentation="date"
8+
value="2023-01-01"
9+
highlightedDates={[
10+
{
11+
date: '2023-01-05',
12+
textColor: '#800080',
13+
backgroundColor: '#ffc0cb',
14+
},
15+
{
16+
date: '2023-01-10',
17+
textColor: '#09721b',
18+
backgroundColor: '#c8e5d0',
19+
},
20+
{
21+
date: '2023-01-20',
22+
textColor: 'var(--ion-color-secondary-contrast)',
23+
backgroundColor: 'var(--ion-color-secondary)',
24+
},
25+
{
26+
date: '2023-01-23',
27+
textColor: 'rgb(68, 10, 184)',
28+
backgroundColor: 'rgb(211, 200, 229)'
29+
}
30+
]}
31+
></IonDatetime>
32+
);
33+
}
34+
export default Example;
35+
```

‎static/usage/v6/datetime/highlightedDates/array/vue.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
```html
2+
<template>
3+
<ion-datetime
4+
presentation="date"
5+
value="2023-01-01"
6+
:highlighted-dates="highlightedDates"
7+
></ion-datetime>
8+
</template>
9+
10+
<script lang="ts">
11+
import { IonDatetime } from '@ionic/vue';
12+
import { defineComponent } from 'vue';
13+
14+
export default defineComponent({
15+
components: { IonDatetime },
16+
setup() {
17+
const highlightedDates = [
18+
{
19+
date: '2023-01-05',
20+
textColor: '#800080',
21+
backgroundColor: '#ffc0cb',
22+
},
23+
{
24+
date: '2023-01-10',
25+
textColor: '#09721b',
26+
backgroundColor: '#c8e5d0',
27+
},
28+
{
29+
date: '2023-01-20',
30+
textColor: 'var(--ion-color-secondary-contrast)',
31+
backgroundColor: 'var(--ion-color-secondary)',
32+
},
33+
{
34+
date: '2023-01-23',
35+
textColor: 'rgb(68, 10, 184)',
36+
backgroundColor: 'rgb(211, 200, 229)'
37+
}
38+
];
39+
40+
return { highlightedDates }
41+
}
42+
});
43+
</script>
44+
```

‎static/usage/v6/datetime/highlightedDates/callback/angular/example_component_html.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
```html
2+
<ion-datetime presentation="date" [highlightedDates]="highlightedDates"></ion-datetime>
3+
```

‎static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
4+
@Component({
5+
selector: 'app-example',
6+
templateUrl: 'example.component.html',
7+
})
8+
export class ExampleComponent {
9+
highlightedDates = (isoString) => {
10+
const date = new Date(isoString);
11+
const utcDay = date.getUTCDate();
12+
13+
if(utcDay % 5 === 0) {
14+
return {
15+
textColor: '#800080',
16+
backgroundColor: '#ffc0cb',
17+
};
18+
}
19+
20+
if(utcDay % 3 === 0) {
21+
return {
22+
textColor: 'var(--ion-color-secondary-contrast)',
23+
backgroundColor: 'var(--ion-color-secondary)',
24+
};
25+
}
26+
27+
return undefined;
28+
};
29+
}
30+
```

‎static/usage/v6/datetime/highlightedDates/callback/demo.html

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Datetime</title>
8+
<link rel="stylesheet" href="../../../../common.css" />
9+
<script src="../../../../common.js"></script>
10+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/[email protected]/dist/ionic/ionic.esm.js"></script>
11+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/[email protected]/css/ionic.bundle.css" />
12+
<style>
13+
ion-datetime {
14+
width: 350px;
15+
}
16+
</style>
17+
</head>
18+
19+
<body>
20+
<ion-app>
21+
<ion-content>
22+
<div class="container">
23+
<ion-datetime presentation="date"></ion-datetime>
24+
</div>
25+
</ion-content>
26+
</ion-app>
27+
28+
<script>
29+
const datetime = document.querySelector('ion-datetime');
30+
datetime.highlightedDates = (isoString) => {
31+
const date = new Date(isoString);
32+
const utcDay = date.getUTCDate();
33+
34+
if(utcDay % 5 === 0) {
35+
return {
36+
textColor: '#800080',
37+
backgroundColor: '#ffc0cb',
38+
};
39+
}
40+
41+
if(utcDay % 3 === 0) {
42+
return {
43+
textColor: 'var(--ion-color-secondary-contrast)',
44+
backgroundColor: 'var(--ion-color-secondary)',
45+
};
46+
}
47+
48+
return undefined;
49+
};
50+
</script>
51+
</body>
52+
53+
</html>

‎static/usage/v6/datetime/highlightedDates/callback/index.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
import react from './react.md';
5+
import vue from './vue.md';
6+
7+
import angular_example_component_html from './angular/example_component_html.md';
8+
import angular_example_component_ts from './angular/example_component_ts.md';
9+
10+
<Playground
11+
size="medium"
12+
version={6}
13+
code={{
14+
javascript,
15+
react,
16+
vue,
17+
angular: {
18+
files: {
19+
'src/app/example.component.html': angular_example_component_html,
20+
'src/app/example.component.ts': angular_example_component_ts,
21+
},
22+
},
23+
}}
24+
src="usage/v6/datetime/highlightedDates/callback/demo.html"
25+
/>

0 commit comments

Comments
 (0)