From 5ecd33c81fb7cf2d756cee9fc0d93380d4ca1403 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria.hutt@outsystems.com>
Date: Fri, 6 Feb 2026 13:31:33 -0800
Subject: [PATCH 1/2] feat(datetime): add new calendar parts

---
 .../angular/example_component_css.md          | 23 ++++++++++++++++++-
 .../styling/calendar-header/demo.html         | 21 +++++++++++++++++
 .../styling/calendar-header/javascript.md     | 23 ++++++++++++++++++-
 .../styling/calendar-header/react/main_css.md | 23 ++++++++++++++++++-
 .../datetime/styling/calendar-header/vue.md   | 21 +++++++++++++++++
 5 files changed, 108 insertions(+), 3 deletions(-)

diff --git a/static/usage/v8/datetime/styling/calendar-header/angular/example_component_css.md b/static/usage/v8/datetime/styling/calendar-header/angular/example_component_css.md
index f95379ddaa..ab447447cb 100644
--- a/static/usage/v8/datetime/styling/calendar-header/angular/example_component_css.md
+++ b/static/usage/v8/datetime/styling/calendar-header/angular/example_component_css.md
@@ -1,9 +1,30 @@
 ```css
 /*
- * Custom Datetime Calendar Header Part
+ * Custom Datetime Calendar Header Parts
  * -------------------------------------------
  */
+ion-datetime::part(calendar-header) {
+  background-color: orange;
+}
+
 ion-datetime::part(month-year-button) {
   background-color: lightblue;
 }
+
+ion-datetime::part(prev-next-buttons) {
+  background-color: firebrick;
+}
+
+ion-datetime::part(prev-button) {
+  color: white;
+}
+
+ion-datetime::part(next-button) {
+  color: black;
+}
+
+ion-datetime::part(days-of-week) {
+  background-color: #9ad162;
+  color: white;
+}
 ```
diff --git a/static/usage/v8/datetime/styling/calendar-header/demo.html b/static/usage/v8/datetime/styling/calendar-header/demo.html
index 331140d4bb..96c4861828 100644
--- a/static/usage/v8/datetime/styling/calendar-header/demo.html
+++ b/static/usage/v8/datetime/styling/calendar-header/demo.html
@@ -15,9 +15,30 @@
       * -------------------------------------------
       */
 
+      ion-datetime::part(calendar-header) {
+        background-color: orange;
+      }
+
       ion-datetime::part(month-year-button) {
         background-color: lightblue;
       }
+
+      ion-datetime::part(prev-next-buttons) {
+        background-color: firebrick;
+      }
+
+      ion-datetime::part(prev-button) {
+        color: white;
+      }
+
+      ion-datetime::part(next-button) {
+        color: black;
+      }
+
+      ion-datetime::part(days-of-week) {
+        background-color: #9ad162;
+        color: white;
+      }
     </style>
   </head>
 
diff --git a/static/usage/v8/datetime/styling/calendar-header/javascript.md b/static/usage/v8/datetime/styling/calendar-header/javascript.md
index fc936e5efe..4bd155c4f8 100644
--- a/static/usage/v8/datetime/styling/calendar-header/javascript.md
+++ b/static/usage/v8/datetime/styling/calendar-header/javascript.md
@@ -3,11 +3,32 @@
 
 <style>
   /*
-   * Custom Datetime Calendar Header Part
+   * Custom Datetime Calendar Header Parts
    * -------------------------------------------
    */
+  ion-datetime::part(calendar-header) {
+    background-color: orange;
+  }
+
   ion-datetime::part(month-year-button) {
     background-color: lightblue;
   }
+
+  ion-datetime::part(prev-next-buttons) {
+    background-color: firebrick;
+  }
+
+  ion-datetime::part(prev-button) {
+    color: white;
+  }
+
+  ion-datetime::part(next-button) {
+    color: black;
+  }
+
+  ion-datetime::part(days-of-week) {
+    background-color: #9ad162;
+    color: white;
+  }
 </style>
 ```
diff --git a/static/usage/v8/datetime/styling/calendar-header/react/main_css.md b/static/usage/v8/datetime/styling/calendar-header/react/main_css.md
index f95379ddaa..ab447447cb 100644
--- a/static/usage/v8/datetime/styling/calendar-header/react/main_css.md
+++ b/static/usage/v8/datetime/styling/calendar-header/react/main_css.md
@@ -1,9 +1,30 @@
 ```css
 /*
- * Custom Datetime Calendar Header Part
+ * Custom Datetime Calendar Header Parts
  * -------------------------------------------
  */
+ion-datetime::part(calendar-header) {
+  background-color: orange;
+}
+
 ion-datetime::part(month-year-button) {
   background-color: lightblue;
 }
+
+ion-datetime::part(prev-next-buttons) {
+  background-color: firebrick;
+}
+
+ion-datetime::part(prev-button) {
+  color: white;
+}
+
+ion-datetime::part(next-button) {
+  color: black;
+}
+
+ion-datetime::part(days-of-week) {
+  background-color: #9ad162;
+  color: white;
+}
 ```
diff --git a/static/usage/v8/datetime/styling/calendar-header/vue.md b/static/usage/v8/datetime/styling/calendar-header/vue.md
index 16b7da10a4..7dfd0f42ac 100644
--- a/static/usage/v8/datetime/styling/calendar-header/vue.md
+++ b/static/usage/v8/datetime/styling/calendar-header/vue.md
@@ -12,8 +12,29 @@
    * Custom Datetime Calendar Header Part
    * -------------------------------------------
    */
+  ion-datetime::part(calendar-header) {
+    background-color: orange;
+  }
+
   ion-datetime::part(month-year-button) {
     background-color: lightblue;
   }
+
+  ion-datetime::part(prev-next-buttons) {
+    background-color: firebrick;
+  }
+
+  ion-datetime::part(prev-button) {
+    color: white;
+  }
+
+  ion-datetime::part(next-button) {
+    color: black;
+  }
+
+  ion-datetime::part(days-of-week) {
+    background-color: #9ad162;
+    color: white;
+  }
 </style>
 ```

From c22dadb8b0c675cf847045041bb1456dd61be110 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria.hutt@outsystems.com>
Date: Fri, 6 Feb 2026 13:57:18 -0800
Subject: [PATCH 2/2] feat(datetime): add datetime part

---
 docs/api/datetime.md                          | 11 ++++++
 .../angular/example_component_css.md          |  9 +++++
 .../angular/example_component_html.md         |  5 +++
 .../angular/example_component_ts.md           | 12 +++++++
 .../styling/datetime-header/demo.html         | 35 +++++++++++++++++++
 .../datetime/styling/datetime-header/index.md | 35 +++++++++++++++++++
 .../styling/datetime-header/javascript.md     | 15 ++++++++
 .../styling/datetime-header/react/main_css.md |  9 +++++
 .../styling/datetime-header/react/main_tsx.md | 17 +++++++++
 .../datetime/styling/datetime-header/vue.md   | 22 ++++++++++++
 10 files changed, 170 insertions(+)
 create mode 100644 static/usage/v8/datetime/styling/datetime-header/angular/example_component_css.md
 create mode 100644 static/usage/v8/datetime/styling/datetime-header/angular/example_component_html.md
 create mode 100644 static/usage/v8/datetime/styling/datetime-header/angular/example_component_ts.md
 create mode 100644 static/usage/v8/datetime/styling/datetime-header/demo.html
 create mode 100644 static/usage/v8/datetime/styling/datetime-header/index.md
 create mode 100644 static/usage/v8/datetime/styling/datetime-header/javascript.md
 create mode 100644 static/usage/v8/datetime/styling/datetime-header/react/main_css.md
 create mode 100644 static/usage/v8/datetime/styling/datetime-header/react/main_tsx.md
 create mode 100644 static/usage/v8/datetime/styling/datetime-header/vue.md

diff --git a/docs/api/datetime.md b/docs/api/datetime.md
index 252d8c8d94..ff7a5a95da 100644
--- a/docs/api/datetime.md
+++ b/docs/api/datetime.md
@@ -43,6 +43,7 @@ import MultipleDateSelection from '@site/static/usage/v8/datetime/multiple/index
 import GlobalTheming from '@site/static/usage/v8/datetime/styling/global-theming/index.md';
 import CalendarHeaderStyling from '@site/static/usage/v8/datetime/styling/calendar-header/index.md';
 import CalendarDaysStyling from '@site/static/usage/v8/datetime/styling/calendar-days/index.md';
+import DatetimeHeaderStyling from '@site/static/usage/v8/datetime/styling/datetime-header/index.md';
 import WheelStyling from '@site/static/usage/v8/datetime/styling/wheel-styling/index.md';
 
 <head>
@@ -371,6 +372,16 @@ The example below selects the day 2 days ago, unless that day is in the previous
 
 <CalendarDaysStyling />
 
+### Datetime Header
+
+The datetime header manages the content for the `title` slot and the selected date.
+
+:::note
+The selected date will not render if `preferWheel` is set to `true`.
+:::
+
+<DatetimeHeaderStyling />
+
 ### Wheel Pickers
 
 The wheels used in `ion-datetime` can be styled through a combination of shadow parts and CSS variables. This applies to both the columns in wheel-style datetimes, and the month/year picker in grid-style datetimes.
diff --git a/static/usage/v8/datetime/styling/datetime-header/angular/example_component_css.md b/static/usage/v8/datetime/styling/datetime-header/angular/example_component_css.md
new file mode 100644
index 0000000000..93733de0a9
--- /dev/null
+++ b/static/usage/v8/datetime/styling/datetime-header/angular/example_component_css.md
@@ -0,0 +1,9 @@
+```css
+/*
+ * Custom Datetime Header Part
+ * -------------------------------------------
+ */
+ion-datetime::part(datetime-header) {
+  background-color: orange;
+}
+```
diff --git a/static/usage/v8/datetime/styling/datetime-header/angular/example_component_html.md b/static/usage/v8/datetime/styling/datetime-header/angular/example_component_html.md
new file mode 100644
index 0000000000..64b144ee4e
--- /dev/null
+++ b/static/usage/v8/datetime/styling/datetime-header/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+<ion-datetime presentation="date">
+  <span slot="title">Select Date</span>
+</ion-datetime>
+```
diff --git a/static/usage/v8/datetime/styling/datetime-header/angular/example_component_ts.md b/static/usage/v8/datetime/styling/datetime-header/angular/example_component_ts.md
new file mode 100644
index 0000000000..75ed761f6e
--- /dev/null
+++ b/static/usage/v8/datetime/styling/datetime-header/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/styling/datetime-header/demo.html b/static/usage/v8/datetime/styling/datetime-header/demo.html
new file mode 100644
index 0000000000..5f54a160ae
--- /dev/null
+++ b/static/usage/v8/datetime/styling/datetime-header/demo.html
@@ -0,0 +1,35 @@
+<!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>
+      /*
+       * Custom Datetime Header Part
+       * -------------------------------------------
+       */
+
+      ion-datetime::part(datetime-header) {
+        background-color: orange;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-datetime presentation="date">
+            <span slot="title">Select Date</span>
+          </ion-datetime>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v8/datetime/styling/datetime-header/index.md b/static/usage/v8/datetime/styling/datetime-header/index.md
new file mode 100644
index 0000000000..db105f3fe6
--- /dev/null
+++ b/static/usage/v8/datetime/styling/datetime-header/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/datetime/styling/datetime-header/demo.html"
+  size="450px"
+/>
diff --git a/static/usage/v8/datetime/styling/datetime-header/javascript.md b/static/usage/v8/datetime/styling/datetime-header/javascript.md
new file mode 100644
index 0000000000..4326b12444
--- /dev/null
+++ b/static/usage/v8/datetime/styling/datetime-header/javascript.md
@@ -0,0 +1,15 @@
+```html
+<ion-datetime presentation="date">
+  <span slot="title">Select Date</span>
+</ion-datetime>
+
+<style>
+  /*
+   * Custom Datetime Header Part
+   * -------------------------------------------
+   */
+  ion-datetime::part(datetime-header) {
+    background-color: orange;
+  }
+</style>
+```
diff --git a/static/usage/v8/datetime/styling/datetime-header/react/main_css.md b/static/usage/v8/datetime/styling/datetime-header/react/main_css.md
new file mode 100644
index 0000000000..93733de0a9
--- /dev/null
+++ b/static/usage/v8/datetime/styling/datetime-header/react/main_css.md
@@ -0,0 +1,9 @@
+```css
+/*
+ * Custom Datetime Header Part
+ * -------------------------------------------
+ */
+ion-datetime::part(datetime-header) {
+  background-color: orange;
+}
+```
diff --git a/static/usage/v8/datetime/styling/datetime-header/react/main_tsx.md b/static/usage/v8/datetime/styling/datetime-header/react/main_tsx.md
new file mode 100644
index 0000000000..b1cf208846
--- /dev/null
+++ b/static/usage/v8/datetime/styling/datetime-header/react/main_tsx.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <IonDatetime presentation="date">
+        <span slot="title">Select Date</span>
+      </IonDatetime>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v8/datetime/styling/datetime-header/vue.md b/static/usage/v8/datetime/styling/datetime-header/vue.md
new file mode 100644
index 0000000000..6c5e5d6b40
--- /dev/null
+++ b/static/usage/v8/datetime/styling/datetime-header/vue.md
@@ -0,0 +1,22 @@
+```html
+<template>
+  <ion-datetime presentation="date">
+    <span slot="title">Select Date</span>
+  </ion-datetime>
+</template>
+
+<script setup lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+</script>
+
+<style scoped>
+  /*
+   * Custom Datetime Header Part
+   * -------------------------------------------
+   */
+
+  ion-datetime::part(datetime-header) {
+    background-color: orange;
+  }
+</style>
+```