Skip to content

docs(datetime): add highlightedDates playgrounds #2769

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Feb 22, 2023
Merged

docs(datetime): add highlightedDates playgrounds #2769

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
97a2df0
docs(datetime): add highlightedDates playgrounds
Feb 13, 2023
f75661e
remove note about stripping time info after adding that directly to f…
Feb 13, 2023
14328c0
rename color to textColor
Feb 16, 2023
a4385b9
add note about selected date styles taking priority
Feb 17, 2023
9eb84c0
add details on why array vs callback
Feb 17, 2023
091419e
remove explicit public from Angular examples
Feb 17, 2023
0500767
use different formats for colors in examples
Feb 17, 2023
97e2726
mention that you can use any color format
Feb 17, 2023
7890b6b
var instead of const for JS examples
Feb 17, 2023
9de99ae
specify playground versions
Feb 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions docs/api/datetime.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -283,6 +286,30 @@ Developers can provide their own buttons for advanced custom behavior.

<CustomizingButtons />

## 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.

<HighlightedDatesArray />

### Using Callback

A callback is better when the highlighted dates are recurring, such as birthdays or recurring meetings.

<HighlightedDatesCallback />

## 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`.
Expand Down
7 changes: 7 additions & 0 deletions static/usage/v6/datetime/highlightedDates/array/angular/example_component_html.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
```html
<ion-datetime
presentation="date"
value="2023-01-01"
[highlightedDates]="highlightedDates"
></ion-datetime>
```
32 changes: 32 additions & 0 deletions static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)'
}
];
}
```
55 changes: 55 additions & 0 deletions static/usage/v6/datetime/highlightedDates/array/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Datetime</title>
<link rel="stylesheet" href="../../../../common.css" />
<script src="../../../../common.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/[email protected]/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/[email protected]/css/ionic.bundle.css" />
<style>
ion-datetime {
width: 350px;
}
</style>
</head>

<body>
<ion-app>
<ion-content>
<div class="container">
<ion-datetime presentation="date" value="2023-01-01"></ion-datetime>
</div>
</ion-content>
</ion-app>

<script>
const datetime = document.querySelector('ion-datetime');
datetime.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)'
}
];
</script>
</body>

</html>
24 changes: 24 additions & 0 deletions static/usage/v6/datetime/highlightedDates/array/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

<Playground
size="medium"
code={{
javascript,
react,
vue,
angular: {
files: {
'src/app/example.component.html': angular_example_component_html,
'src/app/example.component.ts': angular_example_component_ts,
},
},
}}
src="usage/v6/datetime/highlightedDates/array/demo.html"
/>
29 changes: 29 additions & 0 deletions static/usage/v6/datetime/highlightedDates/array/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
```html
<ion-datetime presentation="date" value="2023-01-01"></ion-datetime>

<script>
var datetime = document.querySelector('ion-datetime');
datetime.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)'
}
];
</script>
```
35 changes: 35 additions & 0 deletions static/usage/v6/datetime/highlightedDates/array/react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
```tsx
import React from 'react';
import { IonDatetime } from '@ionic/react';
function Example() {
return (
<IonDatetime
presentation="date"
value="2023-01-01"
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)'
}
]}
></IonDatetime>
);
}
export default Example;
```
44 changes: 44 additions & 0 deletions static/usage/v6/datetime/highlightedDates/array/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
```html
<template>
<ion-datetime
presentation="date"
value="2023-01-01"
:highlighted-dates="highlightedDates"
></ion-datetime>
</template>

<script lang="ts">
import { IonDatetime } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
components: { IonDatetime },
setup() {
const 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)'
}
];

return { highlightedDates }
}
});
</script>
```
3 changes: 3 additions & 0 deletions ...c/usage/v6/datetime/highlightedDates/callback/angular/example_component_html.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
```html
<ion-datetime presentation="date" [highlightedDates]="highlightedDates"></ion-datetime>
```
30 changes: 30 additions & 0 deletions static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
};
}
```
53 changes: 53 additions & 0 deletions static/usage/v6/datetime/highlightedDates/callback/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Datetime</title>
<link rel="stylesheet" href="../../../../common.css" />
<script src="../../../../common.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/[email protected]/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/[email protected]/css/ionic.bundle.css" />
<style>
ion-datetime {
width: 350px;
}
</style>
</head>

<body>
<ion-app>
<ion-content>
<div class="container">
<ion-datetime presentation="date"></ion-datetime>
</div>
</ion-content>
</ion-app>

<script>
const datetime = document.querySelector('ion-datetime');
datetime.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;
};
</script>
</body>

</html>
24 changes: 24 additions & 0 deletions static/usage/v6/datetime/highlightedDates/callback/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

<Playground
size="medium"
code={{
javascript,
react,
vue,
angular: {
files: {
'src/app/example.component.html': angular_example_component_html,
'src/app/example.component.ts': angular_example_component_ts,
},
},
}}
src="usage/v6/datetime/highlightedDates/callback/demo.html"
/>
Loading