Skip to content

Commit 10fd81c

Browse files
brandyscarneybrandyscarney
committed
docs(datetime): add showAdjacentDays section (#4134)
Co-authored-by: Brandy Smith <[email protected]>
1 parent 8f7ff7b commit 10fd81c

File tree

8 files changed

+107
-0
lines changed

8 files changed

+107
-0
lines changed

‎docs/api/datetime.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@ import CustomizingButtonTexts from '@site/static/usage/v8/datetime/buttons/custo
3636
import HighlightedDatesArray from '@site/static/usage/v8/datetime/highlightedDates/array/index.md';
3737
import HighlightedDatesCallback from '@site/static/usage/v8/datetime/highlightedDates/callback/index.md';
3838

39+
import ShowAdjacentDays from '@site/static/usage/v8/datetime/show-adjacent-days/index.md';
40+
3941
import MultipleDateSelection from '@site/static/usage/v8/datetime/multiple/index.md';
4042

4143
import GlobalTheming from '@site/static/usage/v8/datetime/styling/global-theming/index.md';
@@ -248,6 +250,18 @@ import Wheel from '@site/static/usage/v8/datetime/presentation/wheel/index.md';
248250

249251
<Wheel />
250252

253+
## Show Adjacent Days
254+
255+
If the `showAdjacentDays` property is set to `true`, days from the previous and next month will be displayed in the calendar view to fill any empty spaces at the beginning or end of the month. When a user clicks on an enabled adjacent day, the calendar will smoothly animate to show that month's view.
256+
257+
The calendar view always displays 6 rows when `showAdjacentDays` is enabled, so days from the previous or next month will be shown as needed to fill the grid. For example, even if a month starts on the first day of the week and ends within the fifth row, days from the next month will appear at the end to complete the sixth row.
258+
259+
:::note
260+
This property is only supported when using `presentation="date"` and `preferWheel="false"`.
261+
:::
262+
263+
<ShowAdjacentDays />
264+
251265
## Multiple Date Selection
252266

253267
If the `multiple` property is set to `true`, multiple dates can be selected from the calendar picker. Clicking a selected date will deselect it.

‎static/usage/v8/datetime/show-adjacent-days/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 show-adjacent-days="true"></ion-datetime>
3+
```

‎static/usage/v8/datetime/show-adjacent-days/angular/example_component_ts.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import { IonDatetime } from '@ionic/angular/standalone';
4+
5+
@Component({
6+
selector: 'app-example',
7+
templateUrl: 'example.component.html',
8+
styleUrls: ['example.component.css'],
9+
imports: [IonDatetime],
10+
})
11+
export class ExampleComponent {}
12+
```

‎static/usage/v8/datetime/show-adjacent-days/demo.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Datetime</title>
7+
<link rel="stylesheet" href="../../common.css" />
8+
<script src="../../common.js"></script>
9+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
11+
<style>
12+
ion-datetime {
13+
width: 350px;
14+
}
15+
</style>
16+
</head>
17+
18+
<body>
19+
<ion-app>
20+
<ion-content>
21+
<div class="container">
22+
<ion-datetime show-adjacent-days="true"></ion-datetime>
23+
</div>
24+
</ion-content>
25+
</ion-app>
26+
</body>
27+
</html>

‎static/usage/v8/datetime/show-adjacent-days/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+
version="8"
12+
size="medium"
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/v8/datetime/show-adjacent-days/demo.html"
25+
/>

‎static/usage/v8/datetime/show-adjacent-days/javascript.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
```html
2+
<ion-datetime show-adjacent-days="true"></ion-datetime>
3+
```

‎static/usage/v8/datetime/show-adjacent-days/react.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
```tsx
2+
import React, { useRef, useEffect } from 'react';
3+
import { IonDatetime } from '@ionic/react';
4+
5+
function Example() {
6+
return <IonDatetime showAdjacentDays={true}></IonDatetime>;
7+
}
8+
export default Example;
9+
```

‎static/usage/v8/datetime/show-adjacent-days/vue.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
```html
2+
<template>
3+
<ion-datetime show-adjacent-days="true"></ion-datetime>
4+
</template>
5+
6+
<script lang="ts">
7+
import { IonDatetime } from '@ionic/vue';
8+
import { defineComponent } from 'vue';
9+
10+
export default defineComponent({
11+
components: { IonDatetime },
12+
});
13+
</script>
14+
```

0 commit comments

Comments
 (0)