ionic-team · thetaPC · Feb 20, 2026 · Feb 6, 2026 · Feb 6, 2026 · Feb 17, 2026
diff --git 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/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
@@ -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
@@ -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
@@ -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
@@ -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>
 ```
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
+```