diff --git a/core/api.txt b/core/api.txt
index f7e8cc1030..04df06ad12 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -427,6 +427,7 @@ ion-datetime,css-prop,--background-rgb
 ion-datetime,css-prop,--title-color
 ion-datetime,css-prop,--wheel-fade-background-rgb
 ion-datetime,css-prop,--wheel-highlight-background
+ion-datetime,part,month-year-button
 ion-datetime,part,time-button
 ion-datetime,part,time-button active
 ion-datetime,part,wheel-item
diff --git a/core/src/components/datetime/datetime.md.scss b/core/src/components/datetime/datetime.md.scss
index 832b61fec8..97bb2e3fc2 100644
--- a/core/src/components/datetime/datetime.md.scss
+++ b/core/src/components/datetime/datetime.md.scss
@@ -36,7 +36,7 @@
 
 :host .calendar-action-buttons ion-item,
 :host .calendar-action-buttons ion-button {
-  color: #{$text-color-step-350};
+  --color: #{$text-color-step-350};
 }
 
 // Calendar / Header / Days of Week
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index 87c4d5301e..a09eb0fdad 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -82,6 +82,9 @@ import {
  * @part time-button - The button that opens the time picker when using a grid style
  * layout with `presentation="date-time"` or `"time-date"`.
  * @part time-button active - The time picker button when the picker is open.
+ *
+ * @part month-year-button - The button that opens the month/year picker when
+ * using a grid style layout.
  */
 @Component({
   tag: 'ion-datetime',
@@ -1928,6 +1931,7 @@ export class Datetime implements ComponentInterface {
         <div class="calendar-action-buttons">
           <div class="calendar-month-year">
             <ion-item
+              part="month-year-button"
               ref={(el) => (this.monthYearToggleItemRef = el)}
               button
               aria-label="Show year picker"
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-month-year-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-month-year-md-ltr-Mobile-Chrome-linux.png
index f72f2f664d..09e1a507ad 100644
Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-month-year-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-month-year-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-month-year-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-month-year-md-ltr-Mobile-Firefox-linux.png
index db60acbf8b..48521ceaed 100644
Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-month-year-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-month-year-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-month-year-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-month-year-md-ltr-Mobile-Safari-linux.png
index f2e6980510..689108370e 100644
Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-month-year-md-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-month-year-md-ltr-Mobile-Safari-linux.png differ