diff --git a/docs/api/datetime.md b/docs/api/datetime.md index 9836c662181..54a1efc8750 100644 --- a/docs/api/datetime.md +++ b/docs/api/datetime.md @@ -36,6 +36,8 @@ import CustomizingButtonTexts from '@site/static/usage/v8/datetime/buttons/custo import HighlightedDatesArray from '@site/static/usage/v8/datetime/highlightedDates/array/index.md'; import HighlightedDatesCallback from '@site/static/usage/v8/datetime/highlightedDates/callback/index.md'; +import ShowAdjacentDays from '@site/static/usage/v8/datetime/show-adjacent-days/index.md'; + import MultipleDateSelection from '@site/static/usage/v8/datetime/multiple/index.md'; 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'; +## Show Adjacent Days + +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. + +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. + +:::note +This property is only supported when using `presentation="date"` and `preferWheel="false"`. +::: + + + ## Multiple Date Selection If the `multiple` property is set to `true`, multiple dates can be selected from the calendar picker. Clicking a selected date will deselect it. diff --git a/static/usage/v8/datetime/show-adjacent-days/angular/example_component_html.md b/static/usage/v8/datetime/show-adjacent-days/angular/example_component_html.md new file mode 100644 index 00000000000..fcbe696cb02 --- /dev/null +++ b/static/usage/v8/datetime/show-adjacent-days/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/show-adjacent-days/angular/example_component_ts.md b/static/usage/v8/datetime/show-adjacent-days/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v8/datetime/show-adjacent-days/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/show-adjacent-days/demo.html b/static/usage/v8/datetime/show-adjacent-days/demo.html new file mode 100644 index 00000000000..d0879fa4368 --- /dev/null +++ b/static/usage/v8/datetime/show-adjacent-days/demo.html @@ -0,0 +1,27 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+
+
+ + diff --git a/static/usage/v8/datetime/show-adjacent-days/index.md b/static/usage/v8/datetime/show-adjacent-days/index.md new file mode 100644 index 00000000000..45d7c38685c --- /dev/null +++ b/static/usage/v8/datetime/show-adjacent-days/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/v8/datetime/show-adjacent-days/javascript.md b/static/usage/v8/datetime/show-adjacent-days/javascript.md new file mode 100644 index 00000000000..fcbe696cb02 --- /dev/null +++ b/static/usage/v8/datetime/show-adjacent-days/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/show-adjacent-days/react.md b/static/usage/v8/datetime/show-adjacent-days/react.md new file mode 100644 index 00000000000..b97b713880b --- /dev/null +++ b/static/usage/v8/datetime/show-adjacent-days/react.md @@ -0,0 +1,9 @@ +```tsx +import React, { useRef, useEffect } from 'react'; +import { IonDatetime } from '@ionic/react'; + +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v8/datetime/show-adjacent-days/vue.md b/static/usage/v8/datetime/show-adjacent-days/vue.md new file mode 100644 index 00000000000..0c6e2e4b5d3 --- /dev/null +++ b/static/usage/v8/datetime/show-adjacent-days/vue.md @@ -0,0 +1,14 @@ +```html + + + +```