From d9b4f9e2c27623fd5a7d6af76ad1851a41af19b1 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria.hutt@outsystems.com>
Date: Wed, 4 Feb 2026 10:23:07 -0800
Subject: [PATCH 1/2] feat(datetime): add header parts to grid style

---
 core/api.txt                                  |   5 +
 core/src/components/datetime/datetime.tsx     |  23 ++-
 .../datetime/test/custom/datetime.e2e.ts      | 174 ++++++++++++++++++
 .../datetime/test/custom/index.html           |  31 ++++
 4 files changed, 229 insertions(+), 4 deletions(-)

diff --git a/core/api.txt b/core/api.txt
index b4036e6b8e8..caa52d96978 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -566,7 +566,12 @@ ion-datetime,part,calendar-day
 ion-datetime,part,calendar-day active
 ion-datetime,part,calendar-day disabled
 ion-datetime,part,calendar-day today
+ion-datetime,part,days-of-week
+ion-datetime,part,header
 ion-datetime,part,month-year-button
+ion-datetime,part,next-button
+ion-datetime,part,prev-button
+ion-datetime,part,prev-next-buttons
 ion-datetime,part,time-button
 ion-datetime,part,time-button active
 ion-datetime,part,wheel
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index 95f97d37cf0..1ad9bf10557 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -88,8 +88,13 @@ import { checkForPresentationFormatMismatch, warnIfTimeZoneProvided } from './ut
  * layout with `presentation="date-time"` or `"time-date"`.
  * @part time-button active - The time picker button when the picker is open.
  *
+ * @part header - The header container for the calendar when using a grid style layout.
  * @part month-year-button - The button that opens the month/year picker when
  * using a grid style layout.
+ * @part prev-next-buttons - The buttons used to navigate to the next or previous month when using a grid style layout.
+ * @part prev-button - The button used to navigate to the previous month when using a grid style layout.
+ * @part next-button - The button used to navigate to the next month when using a grid style layout.
+ * @part days-of-week - The container for the day-of-the-week header (both weekdays and weekends) when using a grid style layout.
  *
  * @part calendar-day - The individual buttons that display a day inside of the datetime
  * calendar.
@@ -2166,7 +2171,7 @@ export class Datetime implements ComponentInterface {
     const hostDir = this.el.getAttribute('dir') || undefined;
 
     return (
-      <div class="calendar-header">
+      <div class="calendar-header" part="header">
         <div class="calendar-action-buttons">
           <div class="calendar-month-year">
             <button
@@ -2195,7 +2200,12 @@ export class Datetime implements ComponentInterface {
 
           <div class="calendar-next-prev">
             <ion-buttons>
-              <ion-button aria-label="Previous month" disabled={prevMonthDisabled} onClick={() => this.prevMonth()}>
+              <ion-button
+                aria-label="Previous month"
+                disabled={prevMonthDisabled}
+                onClick={() => this.prevMonth()}
+                part="prev-next-buttons prev-button"
+              >
                 <ion-icon
                   dir={hostDir}
                   aria-hidden="true"
@@ -2205,7 +2215,12 @@ export class Datetime implements ComponentInterface {
                   flipRtl
                 ></ion-icon>
               </ion-button>
-              <ion-button aria-label="Next month" disabled={nextMonthDisabled} onClick={() => this.nextMonth()}>
+              <ion-button
+                aria-label="Next month"
+                disabled={nextMonthDisabled}
+                onClick={() => this.nextMonth()}
+                part="prev-next-buttons next-button"
+              >
                 <ion-icon
                   dir={hostDir}
                   aria-hidden="true"
@@ -2218,7 +2233,7 @@ export class Datetime implements ComponentInterface {
             </ion-buttons>
           </div>
         </div>
-        <div class="calendar-days-of-week" aria-hidden="true">
+        <div class="calendar-days-of-week" aria-hidden="true" part="days-of-week">
           {getDaysOfWeek(this.locale, mode, this.firstDayOfWeek % 7).map((d) => {
             return <div class="day-of-week">{d}</div>;
           })}
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts b/core/src/components/datetime/test/custom/datetime.e2e.ts
index 7ef408c0ef2..1ef06f5665a 100644
--- a/core/src/components/datetime/test/custom/datetime.e2e.ts
+++ b/core/src/components/datetime/test/custom/datetime.e2e.ts
@@ -175,6 +175,180 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
 
       expect(backgroundColor).toBe('rgb(0, 0, 255)');
     });
+
+    test('should be able to customize header part within the grid style', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30083',
+      });
+
+      await page.setContent(
+        `
+          <style>
+            ion-datetime::part(header) {
+              background-color: rgb(218, 216, 255);
+            }
+          </style>
+          <ion-datetime value="2020-03-14T14:23:00.000Z"></ion-datetime>
+        `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+      const header = datetime.locator('.calendar-header');
+
+      const backgroundColor = await header.evaluate((el) => {
+        return window.getComputedStyle(el).backgroundColor;
+      });
+
+      expect(backgroundColor).toBe('rgb(218, 216, 255)');
+    });
+
+    test('should be able to customize month/year picker part within the grid style', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/26596',
+      });
+
+      await page.setContent(
+        `
+          <style>
+            ion-datetime::part(month-year-button) {
+              background-color: lightblue;
+            }
+          </style>
+          <ion-datetime value="2020-03-14T14:23:00.000Z"></ion-datetime>
+        `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+      const monthYearButton = datetime.locator('.calendar-month-year-toggle');
+
+      const backgroundColor = await monthYearButton.evaluate((el) => {
+        return window.getComputedStyle(el).backgroundColor;
+      });
+
+      expect(backgroundColor).toBe('rgb(173, 216, 230)');
+    });
+
+    test('should be able to customize prev/next buttons part within the grid style', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30830',
+      });
+
+      await page.setContent(
+        `
+          <style>
+            ion-datetime::part(prev-next-buttons) {
+              background-color: firebrick;
+            }
+          </style>
+          <ion-datetime value="2020-03-14T14:23:00.000Z"></ion-datetime>
+        `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+      const prevButton = datetime.locator('.calendar-next-prev ion-button').first();
+      const nextButton = datetime.locator('.calendar-next-prev ion-button').last();
+
+      const prevBackgroundColor = await prevButton.evaluate((el) => {
+        return window.getComputedStyle(el).backgroundColor;
+      });
+
+      const nextBackgroundColor = await nextButton.evaluate((el) => {
+        return window.getComputedStyle(el).backgroundColor;
+      });
+
+      expect(prevBackgroundColor).toBe('rgb(178, 34, 34)');
+      expect(nextBackgroundColor).toBe('rgb(178, 34, 34)');
+    });
+
+    test('should be able to customize prev button part within the grid style', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30830',
+      });
+
+      await page.setContent(
+        `
+          <style>
+            ion-datetime::part(prev-button) {
+              color: blue;
+            }
+          </style>
+          <ion-datetime value="2020-03-14T14:23:00.000Z"></ion-datetime>
+        `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+      const prevButton = datetime.locator('.calendar-next-prev ion-button').first();
+
+      const color = await prevButton.evaluate((el) => {
+        return window.getComputedStyle(el).color;
+      });
+
+      expect(color).toBe('rgb(0, 0, 255)');
+    });
+
+    test('should be able to customize next button part within the grid style', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30830',
+      });
+
+      await page.setContent(
+        `
+          <style>
+            ion-datetime::part(next-button) {
+              color: blue;
+            }
+          </style>
+          <ion-datetime value="2020-03-14T14:23:00.000Z"></ion-datetime>
+        `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+      const nextButton = datetime.locator('.calendar-next-prev ion-button').last();
+
+      const color = await nextButton.evaluate((el) => {
+        return window.getComputedStyle(el).color;
+      });
+
+      expect(color).toBe('rgb(0, 0, 255)');
+    });
+
+    test('should be able to customize days of the week part within the grid style', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30830',
+      });
+
+      await page.setContent(
+        `
+          <style>
+            ion-datetime::part(days-of-week) {
+              background-color: #9ad162;
+            }
+          </style>
+          <ion-datetime value="2020-03-14T14:23:00.000Z"></ion-datetime>
+        `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+      const daysOfWeek = datetime.locator('.calendar-days-of-week');
+
+      const backgroundColor = await daysOfWeek.evaluate((el) => {
+        return window.getComputedStyle(el).backgroundColor;
+      });
+
+      expect(backgroundColor).toBe('rgb(154, 209, 98)');
+    });
   });
 });
 
diff --git a/core/src/components/datetime/test/custom/index.html b/core/src/components/datetime/test/custom/index.html
index f0df8734521..2513c8f9d7e 100644
--- a/core/src/components/datetime/test/custom/index.html
+++ b/core/src/components/datetime/test/custom/index.html
@@ -134,6 +134,37 @@
         background-color: rgb(154 209 98 / 0.2);
         color: #9ad162;
       }
+
+      /*
+      * Custom Datetime Header Parts
+      * -------------------------------------------
+      */
+
+      #custom-grid::part(header) {
+        background-color: rgb(218, 216, 255);
+      }
+
+      #custom-grid::part(month-year-button) {
+        background-color: lightblue;
+        color: rgb(128, 30, 171);
+      }
+
+      #custom-grid::part(prev-next-buttons) {
+        background-color: firebrick;
+      }
+
+      #custom-grid::part(prev-button) {
+        color: white;
+      }
+
+      #custom-grid::part(next-button) {
+        color: black;
+      }
+
+      #custom-grid::part(days-of-week) {
+        background-color: #9ad162;
+        color: white;
+      }
     </style>
   </head>
 

From fda09499819c6b3444550d8804cd8c145b83ac9a Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria.hutt@outsystems.com>
Date: Thu, 5 Feb 2026 15:08:08 -0800
Subject: [PATCH 2/2] feat(datetime): add parts to calendar-header and
 datetime-header

---
 core/api.txt                                  |  3 +-
 core/src/components/datetime/datetime.tsx     |  8 +++--
 .../datetime/test/custom/datetime.e2e.ts      | 33 ++++++++++++++++---
 .../datetime/test/custom/index.html           | 10 ++++--
 4 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/core/api.txt b/core/api.txt
index caa52d96978..890251791f6 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -566,8 +566,9 @@ ion-datetime,part,calendar-day
 ion-datetime,part,calendar-day active
 ion-datetime,part,calendar-day disabled
 ion-datetime,part,calendar-day today
+ion-datetime,part,calendar-header
+ion-datetime,part,datetime-header
 ion-datetime,part,days-of-week
-ion-datetime,part,header
 ion-datetime,part,month-year-button
 ion-datetime,part,next-button
 ion-datetime,part,prev-button
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index 1ad9bf10557..69455c43192 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -88,7 +88,7 @@ import { checkForPresentationFormatMismatch, warnIfTimeZoneProvided } from './ut
  * layout with `presentation="date-time"` or `"time-date"`.
  * @part time-button active - The time picker button when the picker is open.
  *
- * @part header - The header container for the calendar when using a grid style layout.
+ * @part calendar-header - The calendar header manages the date navigation controls (month/year picker and prev/next buttons) and the days of the week when using a grid style layout.
  * @part month-year-button - The button that opens the month/year picker when
  * using a grid style layout.
  * @part prev-next-buttons - The buttons used to navigate to the next or previous month when using a grid style layout.
@@ -101,6 +101,8 @@ import { checkForPresentationFormatMismatch, warnIfTimeZoneProvided } from './ut
  * @part calendar-day active - The currently selected calendar day.
  * @part calendar-day today - The calendar day that contains the current day.
  * @part calendar-day disabled - The calendar day that is disabled.
+ *
+ * @part datetime-header - The datetime header contains the content for the `title` slot and the selected date.
  */
 @Component({
   tag: 'ion-datetime',
@@ -2171,7 +2173,7 @@ export class Datetime implements ComponentInterface {
     const hostDir = this.el.getAttribute('dir') || undefined;
 
     return (
-      <div class="calendar-header" part="header">
+      <div class="calendar-header" part="calendar-header">
         <div class="calendar-action-buttons">
           <div class="calendar-month-year">
             <button
@@ -2586,7 +2588,7 @@ export class Datetime implements ComponentInterface {
     }
 
     return (
-      <div class="datetime-header">
+      <div class="datetime-header" part="datetime-header">
         <div class="datetime-title">
           <slot name="title">Select Date</slot>
         </div>
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts b/core/src/components/datetime/test/custom/datetime.e2e.ts
index 1ef06f5665a..274f359e9ed 100644
--- a/core/src/components/datetime/test/custom/datetime.e2e.ts
+++ b/core/src/components/datetime/test/custom/datetime.e2e.ts
@@ -176,7 +176,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       expect(backgroundColor).toBe('rgb(0, 0, 255)');
     });
 
-    test('should be able to customize header part within the grid style', async ({ page }, testInfo) => {
+    test('should be able to customize datetime header part', async ({ page }, testInfo) => {
       testInfo.annotations.push({
         type: 'issue',
         description: 'https://github.com/ionic-team/ionic-framework/issues/30083',
@@ -185,8 +185,33 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await page.setContent(
         `
           <style>
-            ion-datetime::part(header) {
-              background-color: rgb(218, 216, 255);
+            ion-datetime::part(datetime-header) {
+              background-color: orange;
+            }
+          </style>
+          <ion-datetime value="2020-03-14T14:23:00.000Z">
+            <span slot="title">Select Date</span>
+          </ion-datetime>
+        `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+      const header = datetime.locator('.datetime-header');
+
+      const backgroundColor = await header.evaluate((el) => {
+        return window.getComputedStyle(el).backgroundColor;
+      });
+
+      expect(backgroundColor).toBe('rgb(255, 165, 0)');
+    });
+
+    test('should be able to customize calendar header part within the grid style', async ({ page }) => {
+      await page.setContent(
+        `
+          <style>
+            ion-datetime::part(calendar-header) {
+              background-color: orange;
             }
           </style>
           <ion-datetime value="2020-03-14T14:23:00.000Z"></ion-datetime>
@@ -201,7 +226,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         return window.getComputedStyle(el).backgroundColor;
       });
 
-      expect(backgroundColor).toBe('rgb(218, 216, 255)');
+      expect(backgroundColor).toBe('rgb(255, 165, 0)');
     });
 
     test('should be able to customize month/year picker part within the grid style', async ({ page }, testInfo) => {
diff --git a/core/src/components/datetime/test/custom/index.html b/core/src/components/datetime/test/custom/index.html
index 2513c8f9d7e..7d224760bea 100644
--- a/core/src/components/datetime/test/custom/index.html
+++ b/core/src/components/datetime/test/custom/index.html
@@ -140,8 +140,9 @@
       * -------------------------------------------
       */
 
-      #custom-grid::part(header) {
-        background-color: rgb(218, 216, 255);
+      #custom-grid::part(calendar-header),
+      #custom-title::part(datetime-header) {
+        background-color: orange;
       }
 
       #custom-grid::part(month-year-button) {
@@ -194,6 +195,11 @@ <h2>Wheel Style</h2>
             <h2>Grid Style</h2>
             <ion-datetime id="custom-calendar-days" value="2023-06-15" presentation="date"></ion-datetime>
           </div>
+          <div class="grid-item">
+            <ion-datetime id="custom-title" presentation="date">
+              <span slot="title">Select Date</span>
+            </ion-datetime>
+          </div>
         </div>
       </ion-content>
     </ion-app>