ionic-team · brandyscarney · Jun 4, 2025 · Jun 3, 2025 · Jun 3, 2025 · Jun 3, 2025
diff --git 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';
 
 <Wheel />
 
+## 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"`.
+:::
+
+<ShowAdjacentDays />
+
 ## 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
@@ -0,0 +1,3 @@
+```html
+<ion-datetime show-adjacent-days="true"></ion-datetime>
+```
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
@@ -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
@@ -0,0 +1,27 @@
+<!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/core@8/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
+    <style>
+      ion-datetime {
+        width: 350px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-datetime show-adjacent-days="true"></ion-datetime>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v8/datetime/show-adjacent-days/index.md 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';
+
+<Playground
+  version="8"
+  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/v8/datetime/show-adjacent-days/demo.html"
+/>
diff --git a/static/usage/v8/datetime/show-adjacent-days/javascript.md b/static/usage/v8/datetime/show-adjacent-days/javascript.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime show-adjacent-days="true"></ion-datetime>
+```
diff --git a/static/usage/v8/datetime/show-adjacent-days/react.md 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 <IonDatetime showAdjacentDays={true}></IonDatetime>;
+}
+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
@@ -0,0 +1,14 @@
+```html
+<template>
+  <ion-datetime show-adjacent-days="true"></ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime },
+  });
+</script>
+```