From 50bbb2789f069165a2045f727f576a6779e2de6c Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Tue, 3 Jun 2025 17:50:26 -0400 Subject: [PATCH 1/4] docs(datetime): add showAdjacentDays section --- docs/api/datetime.md | 14 ++++++++ .../code/stackblitz/v8/angular/package.json | 4 +-- static/code/stackblitz/v8/html/index.html | 4 +-- .../stackblitz/v8/html/index.withContent.html | 4 +-- static/code/stackblitz/v8/html/package.json | 2 +- .../stackblitz/v8/react/package-lock.json | 36 +++++++++---------- static/code/stackblitz/v8/react/package.json | 4 +-- .../code/stackblitz/v8/vue/package-lock.json | 36 +++++++++---------- static/code/stackblitz/v8/vue/package.json | 4 +-- .../angular/example_component_html.md | 3 ++ .../angular/example_component_ts.md | 12 +++++++ .../v8/datetime/show-adjacent-days/demo.html | 29 +++++++++++++++ .../v8/datetime/show-adjacent-days/index.md | 25 +++++++++++++ .../datetime/show-adjacent-days/javascript.md | 3 ++ .../v8/datetime/show-adjacent-days/react.md | 9 +++++ .../v8/datetime/show-adjacent-days/vue.md | 14 ++++++++ 16 files changed, 156 insertions(+), 47 deletions(-) create mode 100644 static/usage/v8/datetime/show-adjacent-days/angular/example_component_html.md create mode 100644 static/usage/v8/datetime/show-adjacent-days/angular/example_component_ts.md create mode 100644 static/usage/v8/datetime/show-adjacent-days/demo.html create mode 100644 static/usage/v8/datetime/show-adjacent-days/index.md create mode 100644 static/usage/v8/datetime/show-adjacent-days/javascript.md create mode 100644 static/usage/v8/datetime/show-adjacent-days/react.md create mode 100644 static/usage/v8/datetime/show-adjacent-days/vue.md 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/code/stackblitz/v8/angular/package.json b/static/code/stackblitz/v8/angular/package.json index 000be94bf91..0ab3f6d36bb 100644 --- a/static/code/stackblitz/v8/angular/package.json +++ b/static/code/stackblitz/v8/angular/package.json @@ -15,8 +15,8 @@ "@angular/platform-browser": "^19.0.0", "@angular/platform-browser-dynamic": "^19.0.0", "@angular/router": "^19.0.0", - "@ionic/angular": "8.5.8", - "@ionic/core": "8.5.8", + "@ionic/angular": "8.5.7-dev.11748545890.14d6a067", + "@ionic/core": "8.5.7-dev.11748545890.14d6a067", "ionicons": "8.0.8", "rxjs": "^7.8.1", "tslib": "^2.5.0", diff --git a/static/code/stackblitz/v8/html/index.html b/static/code/stackblitz/v8/html/index.html index 34f05146a9a..429925ac7f1 100644 --- a/static/code/stackblitz/v8/html/index.html +++ b/static/code/stackblitz/v8/html/index.html @@ -1,8 +1,8 @@ - - + + diff --git a/static/code/stackblitz/v8/html/index.withContent.html b/static/code/stackblitz/v8/html/index.withContent.html index af371907653..86374a7f157 100644 --- a/static/code/stackblitz/v8/html/index.withContent.html +++ b/static/code/stackblitz/v8/html/index.withContent.html @@ -1,8 +1,8 @@ - - + + diff --git a/static/code/stackblitz/v8/html/package.json b/static/code/stackblitz/v8/html/package.json index cfb37587fd9..0ef50114973 100644 --- a/static/code/stackblitz/v8/html/package.json +++ b/static/code/stackblitz/v8/html/package.json @@ -1,6 +1,6 @@ { "dependencies": { - "@ionic/core": "8.5.8", + "@ionic/core": "8.5.7-dev.11748545890.14d6a067", "ionicons": "8.0.8" } } diff --git a/static/code/stackblitz/v8/react/package-lock.json b/static/code/stackblitz/v8/react/package-lock.json index f17494bdd54..0ff89b90fb2 100644 --- a/static/code/stackblitz/v8/react/package-lock.json +++ b/static/code/stackblitz/v8/react/package-lock.json @@ -8,8 +8,8 @@ "name": "vite-react-typescript", "version": "0.1.0", "dependencies": { - "@ionic/react": "8.5.8", - "@ionic/react-router": "8.5.8", + "@ionic/react": "8.5.7-dev.11748545890.14d6a067", + "@ionic/react-router": "8.5.7-dev.11748545890.14d6a067", "@types/node": "^22.0.0", "@types/react": "^19.0.0", "@types/react-dom": "^19.0.0", @@ -661,8 +661,8 @@ } }, "node_modules/@ionic/core": { - "version": "8.5.8", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.5.8.tgz", + "version": "8.5.7-dev.11748545890.14d6a067", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.5.7-dev.11748545890.14d6a067.tgz", "integrity": "sha512-RICgLpNOVw16AYeOswP68neu3w1zB90ApwDVSu+bchs3gxCNf34ic0O+fDLf3ZMqpfJ8qiJ6zNMgL5VqnWs30w==", "dependencies": { "@stencil/core": "4.20.0", @@ -671,11 +671,11 @@ } }, "node_modules/@ionic/react": { - "version": "8.5.8", - "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.5.8.tgz", + "version": "8.5.7-dev.11748545890.14d6a067", + "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.5.7-dev.11748545890.14d6a067.tgz", "integrity": "sha512-zb2WDIhH91QrO1v47kFVxblFJwdU2ukeAbSfV2ecM2BqluT5ro16Vz7GSkp4/e3+ULAgXJuPS5Zw8FdkI8+/UQ==", "dependencies": { - "@ionic/core": "8.5.8", + "@ionic/core": "8.5.7-dev.11748545890.14d6a067", "ionicons": "^7.0.0", "tslib": "*" }, @@ -685,11 +685,11 @@ } }, "node_modules/@ionic/react-router": { - "version": "8.5.8", - "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-8.5.8.tgz", + "version": "8.5.7-dev.11748545890.14d6a067", + "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-8.5.7-dev.11748545890.14d6a067.tgz", "integrity": "sha512-VPn4VTCRyqtElLAggye/BzHko3PeyZQ+dWqTwUEb5fR2fL/UKXCZSnRAxa+ohy3En3ZUanBGkydRX39X/YoP6g==", "dependencies": { - "@ionic/react": "8.5.8", + "@ionic/react": "8.5.7-dev.11748545890.14d6a067", "tslib": "*" }, "peerDependencies": { @@ -2109,8 +2109,8 @@ "optional": true }, "@ionic/core": { - "version": "8.5.8", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.5.8.tgz", + "version": "8.5.7-dev.11748545890.14d6a067", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.5.7-dev.11748545890.14d6a067.tgz", "integrity": "sha512-RICgLpNOVw16AYeOswP68neu3w1zB90ApwDVSu+bchs3gxCNf34ic0O+fDLf3ZMqpfJ8qiJ6zNMgL5VqnWs30w==", "requires": { "@stencil/core": "4.20.0", @@ -2119,21 +2119,21 @@ } }, "@ionic/react": { - "version": "8.5.8", - "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.5.8.tgz", + "version": "8.5.7-dev.11748545890.14d6a067", + "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.5.7-dev.11748545890.14d6a067.tgz", "integrity": "sha512-zb2WDIhH91QrO1v47kFVxblFJwdU2ukeAbSfV2ecM2BqluT5ro16Vz7GSkp4/e3+ULAgXJuPS5Zw8FdkI8+/UQ==", "requires": { - "@ionic/core": "8.5.8", + "@ionic/core": "8.5.7-dev.11748545890.14d6a067", "ionicons": "^7.0.0", "tslib": "*" } }, "@ionic/react-router": { - "version": "8.5.8", - "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-8.5.8.tgz", + "version": "8.5.7-dev.11748545890.14d6a067", + "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-8.5.7-dev.11748545890.14d6a067.tgz", "integrity": "sha512-VPn4VTCRyqtElLAggye/BzHko3PeyZQ+dWqTwUEb5fR2fL/UKXCZSnRAxa+ohy3En3ZUanBGkydRX39X/YoP6g==", "requires": { - "@ionic/react": "8.5.8", + "@ionic/react": "8.5.7-dev.11748545890.14d6a067", "tslib": "*" } }, diff --git a/static/code/stackblitz/v8/react/package.json b/static/code/stackblitz/v8/react/package.json index c65bac92c32..343c97e7f11 100644 --- a/static/code/stackblitz/v8/react/package.json +++ b/static/code/stackblitz/v8/react/package.json @@ -3,8 +3,8 @@ "version": "0.1.0", "private": true, "dependencies": { - "@ionic/react": "8.5.8", - "@ionic/react-router": "8.5.8", + "@ionic/react": "8.5.7-dev.11748545890.14d6a067", + "@ionic/react-router": "8.5.7-dev.11748545890.14d6a067", "@types/node": "^22.0.0", "@types/react": "^19.0.0", "@types/react-dom": "^19.0.0", diff --git a/static/code/stackblitz/v8/vue/package-lock.json b/static/code/stackblitz/v8/vue/package-lock.json index f47c032cc39..d21035387b8 100644 --- a/static/code/stackblitz/v8/vue/package-lock.json +++ b/static/code/stackblitz/v8/vue/package-lock.json @@ -8,8 +8,8 @@ "name": "vite-vue-starter", "version": "0.0.0", "dependencies": { - "@ionic/vue": "8.5.8", - "@ionic/vue-router": "8.5.8", + "@ionic/vue": "8.5.7-dev.11748545890.14d6a067", + "@ionic/vue-router": "8.5.7-dev.11748545890.14d6a067", "vue": "^3.2.25", "vue-router": "4.5.1" }, @@ -463,8 +463,8 @@ } }, "node_modules/@ionic/core": { - "version": "8.5.8", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.5.8.tgz", + "version": "8.5.7-dev.11748545890.14d6a067", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.5.7-dev.11748545890.14d6a067.tgz", "integrity": "sha512-RICgLpNOVw16AYeOswP68neu3w1zB90ApwDVSu+bchs3gxCNf34ic0O+fDLf3ZMqpfJ8qiJ6zNMgL5VqnWs30w==", "dependencies": { "@stencil/core": "4.20.0", @@ -473,21 +473,21 @@ } }, "node_modules/@ionic/vue": { - "version": "8.5.8", - "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.5.8.tgz", + "version": "8.5.7-dev.11748545890.14d6a067", + "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.5.7-dev.11748545890.14d6a067.tgz", "integrity": "sha512-Ys3pXjHYjwlA9UnAFN+CmO+wzapuQH78EYomUor9T7Fb9ia7LRbp9mpnhWd2dfkz8H6DiM0Vy0aF9OMp4dgVvw==", "dependencies": { - "@ionic/core": "8.5.8", + "@ionic/core": "8.5.7-dev.11748545890.14d6a067", "@stencil/vue-output-target": "0.10.7", "ionicons": "^7.0.0" } }, "node_modules/@ionic/vue-router": { - "version": "8.5.8", - "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-8.5.8.tgz", + "version": "8.5.7-dev.11748545890.14d6a067", + "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-8.5.7-dev.11748545890.14d6a067.tgz", "integrity": "sha512-hZyksxlNUliMj0ADDyBwMDUUP06wqrdDhzmykxj1iFLE2u/UQVk9+7rXOFiwshwY/yGhq4c8iPR4WGMaN4nSRQ==", "dependencies": { - "@ionic/vue": "8.5.8" + "@ionic/vue": "8.5.7-dev.11748545890.14d6a067" } }, "node_modules/@jridgewell/sourcemap-codec": { @@ -1642,8 +1642,8 @@ "optional": true }, "@ionic/core": { - "version": "8.5.8", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.5.8.tgz", + "version": "8.5.7-dev.11748545890.14d6a067", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.5.7-dev.11748545890.14d6a067.tgz", "integrity": "sha512-RICgLpNOVw16AYeOswP68neu3w1zB90ApwDVSu+bchs3gxCNf34ic0O+fDLf3ZMqpfJ8qiJ6zNMgL5VqnWs30w==", "requires": { "@stencil/core": "4.20.0", @@ -1652,21 +1652,21 @@ } }, "@ionic/vue": { - "version": "8.5.8", - "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.5.8.tgz", + "version": "8.5.7-dev.11748545890.14d6a067", + "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.5.7-dev.11748545890.14d6a067.tgz", "integrity": "sha512-Ys3pXjHYjwlA9UnAFN+CmO+wzapuQH78EYomUor9T7Fb9ia7LRbp9mpnhWd2dfkz8H6DiM0Vy0aF9OMp4dgVvw==", "requires": { - "@ionic/core": "8.5.8", + "@ionic/core": "8.5.7-dev.11748545890.14d6a067", "@stencil/vue-output-target": "0.10.7", "ionicons": "^7.0.0" } }, "@ionic/vue-router": { - "version": "8.5.8", - "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-8.5.8.tgz", + "version": "8.5.7-dev.11748545890.14d6a067", + "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-8.5.7-dev.11748545890.14d6a067.tgz", "integrity": "sha512-hZyksxlNUliMj0ADDyBwMDUUP06wqrdDhzmykxj1iFLE2u/UQVk9+7rXOFiwshwY/yGhq4c8iPR4WGMaN4nSRQ==", "requires": { - "@ionic/vue": "8.5.8" + "@ionic/vue": "8.5.7-dev.11748545890.14d6a067" } }, "@jridgewell/sourcemap-codec": { diff --git a/static/code/stackblitz/v8/vue/package.json b/static/code/stackblitz/v8/vue/package.json index 6e644d67c65..e0ab74f9fe4 100644 --- a/static/code/stackblitz/v8/vue/package.json +++ b/static/code/stackblitz/v8/vue/package.json @@ -8,8 +8,8 @@ "preview": "vite preview" }, "dependencies": { - "@ionic/vue": "8.5.8", - "@ionic/vue-router": "8.5.8", + "@ionic/vue": "8.5.7-dev.11748545890.14d6a067", + "@ionic/vue-router": "8.5.7-dev.11748545890.14d6a067", "vue": "^3.2.25", "vue-router": "4.5.1" }, 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..888b7c2eaa8 --- /dev/null +++ b/static/usage/v8/datetime/show-adjacent-days/demo.html @@ -0,0 +1,29 @@ + + + + + + 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 + + + +``` From 114e8850d73673a51c48d2d2ea4c77465f70f217 Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Tue, 3 Jun 2025 17:54:30 -0400 Subject: [PATCH 2/4] style: lint --- .../usage/v8/datetime/show-adjacent-days/demo.html | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/static/usage/v8/datetime/show-adjacent-days/demo.html b/static/usage/v8/datetime/show-adjacent-days/demo.html index 888b7c2eaa8..6fa1eb4c553 100644 --- a/static/usage/v8/datetime/show-adjacent-days/demo.html +++ b/static/usage/v8/datetime/show-adjacent-days/demo.html @@ -6,10 +6,16 @@ Datetime - - + +