From 2745def02e7d9e283c88f0017ac26fe9c5e3e386 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria.hutt@outsystems.com>
Date: Thu, 22 Jan 2026 14:05:54 -0800
Subject: [PATCH 1/3] feat(datetime): add wheel part to ion-picker-column

---
 core/src/components/datetime/datetime.tsx     |  9 +++
 .../datetime/test/custom/datetime.e2e.ts      | 56 +++++++++++++++++++
 .../datetime/test/custom/index.html           |  5 ++
 3 files changed, 70 insertions(+)

diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index 3411f28eb57..95f97d37cf0 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -79,6 +79,7 @@ import { checkForPresentationFormatMismatch, warnIfTimeZoneProvided } from './ut
  * @slot buttons - The buttons in the datetime.
  * @slot time-label - The label for the time selector in the datetime.
  *
+ * @part wheel - The wheel container when using a wheel style layout, or in the month/year picker when using a grid style layout.
  * @part wheel-item - The individual items when using a wheel style layout, or in the
  * month/year picker when using a grid style layout.
  * @part wheel-item active - The currently selected wheel-item.
@@ -1724,6 +1725,7 @@ export class Datetime implements ComponentInterface {
 
     return (
       <ion-picker-column
+        part={WHEEL_PART}
         aria-label="Select a date"
         class="date-column"
         color={this.color}
@@ -1844,6 +1846,7 @@ export class Datetime implements ComponentInterface {
 
     return (
       <ion-picker-column
+        part={WHEEL_PART}
         aria-label="Select a day"
         class="day-column"
         color={this.color}
@@ -1888,6 +1891,7 @@ export class Datetime implements ComponentInterface {
 
     return (
       <ion-picker-column
+        part={WHEEL_PART}
         aria-label="Select a month"
         class="month-column"
         color={this.color}
@@ -1931,6 +1935,7 @@ export class Datetime implements ComponentInterface {
 
     return (
       <ion-picker-column
+        part={WHEEL_PART}
         aria-label="Select a year"
         class="year-column"
         color={this.color}
@@ -2005,6 +2010,7 @@ export class Datetime implements ComponentInterface {
 
     return (
       <ion-picker-column
+        part={WHEEL_PART}
         aria-label="Select an hour"
         color={this.color}
         disabled={disabled}
@@ -2045,6 +2051,7 @@ export class Datetime implements ComponentInterface {
 
     return (
       <ion-picker-column
+        part={WHEEL_PART}
         aria-label="Select a minute"
         color={this.color}
         disabled={disabled}
@@ -2088,6 +2095,7 @@ export class Datetime implements ComponentInterface {
 
     return (
       <ion-picker-column
+        part={WHEEL_PART}
         aria-label="Select a day period"
         style={isDayPeriodRTL ? { order: '-1' } : {}}
         color={this.color}
@@ -2716,5 +2724,6 @@ export class Datetime implements ComponentInterface {
 let datetimeIds = 0;
 const CANCEL_ROLE = 'datetime-cancel';
 const CONFIRM_ROLE = 'datetime-confirm';
+const WHEEL_PART = 'wheel';
 const WHEEL_ITEM_PART = 'wheel-item';
 const WHEEL_ITEM_ACTIVE_PART = `active`;
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts b/core/src/components/datetime/test/custom/datetime.e2e.ts
index 60339fbf742..3ee24c567fb 100644
--- a/core/src/components/datetime/test/custom/datetime.e2e.ts
+++ b/core/src/components/datetime/test/custom/datetime.e2e.ts
@@ -42,6 +42,62 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-calendar-days`));
     });
   });
+
+  test.describe(title('CSS shadow parts'), () => {
+    test('should be able to customize wheel part', async ({ page }) => {
+      await page.setContent(
+        `
+          <style>
+            ion-datetime::part(wheel) {
+              background-color: red;
+            }
+          </style>
+          <ion-datetime
+            prefer-wheel="true"
+            value="2020-03-14T14:23:00.000Z"
+          ></ion-datetime>
+        `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+      const pickerColumn = datetime.locator('ion-picker-column').first();
+
+      const backgroundColor = await pickerColumn.evaluate((el) => {
+        return window.getComputedStyle(el).backgroundColor;
+      });
+
+      expect(backgroundColor).toBe('rgb(255, 0, 0)');
+    });
+
+    test('should be able to customize wheel part when focused', async ({ page }) => {
+      await page.setContent(
+        `
+          <style>
+            ion-datetime::part(wheel):focus {
+              background-color: blue;
+            }
+          </style>
+          <ion-datetime
+            prefer-wheel="true"
+            value="2020-03-14T14:23:00.000Z"
+          ></ion-datetime>
+        `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+      const pickerColumn = datetime.locator('ion-picker-column').first();
+
+      await pickerColumn.click({ position: { x: 10, y: 10 } });
+
+      const backgroundColor = await pickerColumn.evaluate((el) => {
+        return window.getComputedStyle(el).backgroundColor;
+      });
+
+      expect(backgroundColor).toBe('rgb(0, 0, 255)');
+    });
+  });
 });
 
 /**
diff --git a/core/src/components/datetime/test/custom/index.html b/core/src/components/datetime/test/custom/index.html
index 09895d9c591..c52d059f8ed 100644
--- a/core/src/components/datetime/test/custom/index.html
+++ b/core/src/components/datetime/test/custom/index.html
@@ -74,6 +74,11 @@
         color: rgb(128, 30, 171);
       }
 
+      .custom-grid-wheel::part(wheel):focus,
+      ion-picker-column:focus {
+        background-color: rgba(138, 238, 69, 0.37);
+      }
+
       /*
       * Custom Datetime Day Parts
       * -------------------------------------------

From 1ba93f1404093e6ac46f4ff47594037e2def393a Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria.hutt@outsystems.com>
Date: Thu, 22 Jan 2026 14:09:55 -0800
Subject: [PATCH 2/3] test(datetime): add testinfo

---
 .../datetime/test/custom/datetime.e2e.ts           | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts b/core/src/components/datetime/test/custom/datetime.e2e.ts
index 3ee24c567fb..b7f44cbc614 100644
--- a/core/src/components/datetime/test/custom/datetime.e2e.ts
+++ b/core/src/components/datetime/test/custom/datetime.e2e.ts
@@ -44,7 +44,12 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   });
 
   test.describe(title('CSS shadow parts'), () => {
-    test('should be able to customize wheel part', async ({ page }) => {
+    test('should be able to customize wheel part', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30420',
+      });
+
       await page.setContent(
         `
           <style>
@@ -70,7 +75,12 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       expect(backgroundColor).toBe('rgb(255, 0, 0)');
     });
 
-    test('should be able to customize wheel part when focused', async ({ page }) => {
+    test('should be able to customize wheel part when focused', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30420',
+      });
+
       await page.setContent(
         `
           <style>

From 057e03f8f8f6d54b23381c545402a9358c666daa Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria.hutt@outsystems.com>
Date: Thu, 22 Jan 2026 14:19:32 -0800
Subject: [PATCH 3/3] chore(datetime): run build

---
 core/api.txt | 1 +
 1 file changed, 1 insertion(+)

diff --git a/core/api.txt b/core/api.txt
index 745d82786af..995c372cdfd 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -569,6 +569,7 @@ ion-datetime,part,calendar-day today
 ion-datetime,part,month-year-button
 ion-datetime,part,time-button
 ion-datetime,part,time-button active
+ion-datetime,part,wheel
 ion-datetime,part,wheel-item
 ion-datetime,part,wheel-item active