diff --git a/BREAKING.md b/BREAKING.md
index 4dde0c88e2b..f61bf2fd443 100644
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -18,6 +18,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   - [Button](#version-9x-button)
   - [Card](#version-9x-card)
   - [Chip](#version-9x-chip)
+  - [Datetime](#version-9x-datetime)
   - [Grid](#version-9x-grid)
 
 <h2 id="version-9x-components">Components</h2>
@@ -34,6 +35,10 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 
 - The `border-radius` of the `ios` and `md` chip now defaults to `10px` and `8px`, respectively, instead of `16px` in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"round"`, or override the `--border-radius` CSS variable to specify a different value.
 
+<h4 id="version-9x-datetime">Datetime</h4>
+
+- The `ion-buttons` component has been removed from the internal implementation of `ion-datetime` and is no longer required when passing custom buttons to the `slot="buttons"`. When providing custom buttons, use a `div` element instead of `ion-buttons`. While existing code using `ion-buttons` may continue to work visually, future updates to the `ion-buttons` component may cause any styles you rely on to break.
+
 <h4 id="version-9x-grid">Grid</h4>
 
 - The properties `pull` and `push` have been deprecated and no longer work. A similar look can be achieved with the newly added property `order`.
@@ -140,4 +145,4 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
     </ion-col>
   </ion-row>
 </ion-grid>
-```
\ No newline at end of file
+```
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 5119829a658..27ce1aca18f 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -600,7 +600,7 @@ export namespace Components {
          */
         "expand"?: 'full' | 'block';
         /**
-          * Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"` for a transparent button with a border, or to `"solid"` for a button with a filled background. The default fill is `"solid"` except inside of a toolbar, where the default is `"clear"`.
+          * Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"` for a transparent button with a border, or to `"solid"` for a button with a filled background. The default fill is `"solid"` except when inside of a buttons or datetime component, where the default fill is `"clear"`.
          */
         "fill"?: 'clear' | 'outline' | 'solid' | 'default';
         /**
@@ -6555,7 +6555,7 @@ declare namespace LocalJSX {
          */
         "expand"?: 'full' | 'block';
         /**
-          * Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"` for a transparent button with a border, or to `"solid"` for a button with a filled background. The default fill is `"solid"` except inside of a toolbar, where the default is `"clear"`.
+          * Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"` for a transparent button with a border, or to `"solid"` for a button with a filled background. The default fill is `"solid"` except when inside of a buttons or datetime component, where the default fill is `"clear"`.
          */
         "fill"?: 'clear' | 'outline' | 'solid' | 'default';
         /**
diff --git a/core/src/components/button/button.ionic.scss b/core/src/components/button/button.ionic.scss
index 39503a496fa..2a0abbf8a7f 100644
--- a/core/src/components/button/button.ionic.scss
+++ b/core/src/components/button/button.ionic.scss
@@ -334,3 +334,12 @@
     @include globals.position(null, globals.$ion-space-200, globals.$ion-space-200, null);
   }
 }
+
+// Button in Datetime
+// --------------------------------------------------
+
+:host(.in-datetime) {
+  @include globals.typography(globals.$ion-body-action-md);
+
+  min-height: globals.$ion-space-1200;
+}
diff --git a/core/src/components/button/button.ios.scss b/core/src/components/button/button.ios.scss
index 760ce302be2..fa202838402 100644
--- a/core/src/components/button/button.ios.scss
+++ b/core/src/components/button/button.ios.scss
@@ -293,3 +293,20 @@
   background: var(--ion-toolbar-color, var(--color));
   color: #{var(--ion-toolbar-background, var(--background), ion-color(primary, contrast))};
 }
+
+// Button in Datetime
+// --------------------------------------------------
+
+:host(.in-datetime) {
+  --padding-top: 3px;
+  --padding-bottom: 3px;
+  --padding-start: 5px;
+  --padding-end: 5px;
+
+  @include margin(0px, 2px, 0px, 2px);
+
+  min-height: 32px;
+
+  font-size: dynamic-font-clamp(1, 17px, 1.24);
+  font-weight: 400;
+}
diff --git a/core/src/components/button/button.md.scss b/core/src/components/button/button.md.scss
index 2a5826d88d0..869f2830785 100644
--- a/core/src/components/button/button.md.scss
+++ b/core/src/components/button/button.md.scss
@@ -243,3 +243,24 @@
   background: var(--ion-toolbar-background, var(--color));
   color: #{var(--ion-toolbar-color, var(--background), ion-color(primary, contrast))};
 }
+
+// Button in Datetime
+// --------------------------------------------------
+
+:host(.in-datetime) {
+  --padding-top: 3px;
+  --padding-bottom: 3px;
+  --padding-start: 8px;
+  --padding-end: 8px;
+  --box-shadow: none;
+
+  @include margin(0px, 2px, 0px, 2px);
+
+  min-height: 32px;
+}
+
+:host(.in-datetime.button-clear) {
+  --background-activated: transparent;
+  --background-focused: currentColor;
+  --background-hover: currentColor;
+}
diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx
index 77ed273c432..e834cbec275 100644
--- a/core/src/components/button/button.tsx
+++ b/core/src/components/button/button.tsx
@@ -31,9 +31,10 @@ import type { RouterDirection } from '../router/utils/interface';
   shadow: true,
 })
 export class Button implements ComponentInterface, AnchorInterface, ButtonInterface {
+  private inDatetime = false;
   private inItem = false;
   private inListHeader = false;
-  private inToolbar = false;
+  private inButtons = false;
   private formButtonEl: HTMLButtonElement | null = null;
   private formEl: HTMLFormElement | null = null;
   private inheritedAttributes: Attributes = {};
@@ -78,7 +79,8 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
   /**
    * Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"`
    * for a transparent button with a border, or to `"solid"` for a button with a filled background.
-   * The default fill is `"solid"` except inside of a toolbar, where the default is `"clear"`.
+   * The default fill is `"solid"` except when inside of a buttons or datetime component, where
+   * the default fill is `"clear"`.
    */
   @Prop({ reflect: true, mutable: true }) fill?: 'clear' | 'outline' | 'solid' | 'default';
 
@@ -216,7 +218,12 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
   }
 
   componentWillLoad() {
-    this.inToolbar = !!this.el.closest('ion-buttons');
+    // Check if element is inside a shadow root and get the host if so
+    const rootNode = this.el.getRootNode();
+    const shadowHost = rootNode instanceof ShadowRoot ? (rootNode as ShadowRoot).host : null;
+
+    this.inDatetime = !!this.el.closest('ion-datetime') || shadowHost?.tagName === 'ION-DATETIME';
+    this.inButtons = !!this.el.closest('ion-buttons');
     this.inListHeader = !!this.el.closest('ion-list-header');
     this.inItem = !!this.el.closest('ion-item') || !!this.el.closest('ion-item-divider');
     this.inheritedAttributes = inheritAriaAttributes(this.el);
@@ -233,9 +240,11 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
   private get rippleType() {
     const hasClearFill = this.fill === undefined || this.fill === 'clear';
 
-    // If the button is in a toolbar, has a clear fill (which is the default)
-    // and only has an icon we use the unbounded "circular" ripple effect
-    if (hasClearFill && this.hasIconOnly && this.inToolbar) {
+    // Use the unbounded "circular" ripple effect if it:
+    // - Has a clear fill (the default)
+    // - Only has an icon and
+    // - Is inside of buttons (used in a toolbar) or a datetime
+    if (hasClearFill && this.hasIconOnly && (this.inButtons || this.inDatetime)) {
       return 'unbounded';
     }
 
@@ -400,7 +409,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
           };
     let fill = this.fill;
     if (fill === undefined) {
-      fill = this.inToolbar || this.inListHeader ? 'clear' : 'solid';
+      fill = this.inDatetime || this.inButtons || this.inListHeader ? 'clear' : 'solid';
     }
 
     /**
@@ -426,9 +435,10 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
           [`${buttonType}-${shape}`]: true,
           [`${buttonType}-${fill}`]: true,
           [`${buttonType}-strong`]: strong,
+          'in-datetime': this.inDatetime,
           'in-toolbar': hostContext('ion-toolbar', this.el),
           'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
-          'in-buttons': hostContext('ion-buttons', this.el),
+          'in-buttons': this.inButtons,
           'button-has-icon-only': hasIconOnly,
           'button-has-badge': hasBadge,
           'button-disabled': disabled,
diff --git a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-ltr-Mobile-Chrome-linux.png
index 7f2b1ff5228..2b2c2eb1fd2 100644
Binary files a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-md-ltr-Mobile-Chrome-linux.png
index 4635391f97b..5f522a3f84e 100644
Binary files a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/datetime.common.scss b/core/src/components/datetime/datetime.common.scss
index 97730fa9eb6..77f86cb9da6 100644
--- a/core/src/components/datetime/datetime.common.scss
+++ b/core/src/components/datetime/datetime.common.scss
@@ -149,7 +149,8 @@
   width: 100%;
 }
 
-:host .datetime-action-buttons ion-buttons,
+:host .datetime-action-buttons,
+::slotted([slot="buttons"]),
 /**
  * The confirm and clear buttons are grouped in a
  * container so that they appear on the end opposite
diff --git a/core/src/components/datetime/datetime.ionic.scss b/core/src/components/datetime/datetime.ionic.scss
index e1411eacb8b..d6f0804ae82 100644
--- a/core/src/components/datetime/datetime.ionic.scss
+++ b/core/src/components/datetime/datetime.ionic.scss
@@ -251,15 +251,10 @@
   );
 }
 
-:host .datetime-buttons ion-buttons,
-.datetime-action-buttons .datetime-action-buttons-container {
+:host .datetime-buttons .datetime-action-buttons,
+.datetime-action-buttons .datetime-action-buttons-container,
+::slotted([slot="buttons"]) {
   flex-flow: column;
   align-items: stretch;
   gap: globals.$ion-space-200;
 }
-
-:host .datetime-buttons ion-buttons ion-button {
-  @include globals.typography(globals.$ion-body-action-md);
-
-  min-height: globals.$ion-space-1200;
-}
diff --git a/core/src/components/datetime/datetime.ios.scss b/core/src/components/datetime/datetime.ios.scss
index e49bdc3241b..dd6b9160038 100644
--- a/core/src/components/datetime/datetime.ios.scss
+++ b/core/src/components/datetime/datetime.ios.scss
@@ -55,16 +55,41 @@
 }
 
 :host .calendar-action-buttons .calendar-month-year-toggle ion-icon,
-:host .calendar-action-buttons ion-buttons ion-button {
+:host .calendar-action-buttons ion-button {
   color: current-color(base);
 }
 
-:host .calendar-action-buttons ion-buttons {
+:host .calendar-action-buttons ion-button {
+  @include margin(0, 0, 0, 0);
+}
+
+:host .calendar-next-prev {
   @include padding($datetime-ios-padding * 0.5, 0, 0, 0);
 }
 
-:host .calendar-action-buttons ion-buttons ion-button {
-  @include margin(0, 0, 0, 0);
+// These styles are copied from buttons.ios.scss
+.calendar-next-prev ion-button {
+  --padding-top: 0;
+  --padding-bottom: 0;
+  --padding-start: 5px;
+  --padding-end: 5px;
+
+  @include margin-horizontal(2px, 2px);
+
+  min-height: 32px;
+}
+
+// These styles are copied from buttons.ios.scss
+.calendar-next-prev ion-button ion-icon[slot="icon-only"] {
+  @include padding(0);
+  @include margin(0);
+
+  // This value is calculated by dividing the font size the
+  // icon should be in px (28px) by the font size of its
+  // parent button (17px). e.g. 28 / 17 = 1.647
+  font-size: 1.65em;
+
+  line-height: 0.67;
 }
 
 // Calendar / Header / Days of Week
@@ -297,6 +322,7 @@
 
 // Footer
 // -----------------------------------
+
 :host .datetime-buttons {
   @include padding(
     $datetime-ios-padding * 0.5,
@@ -308,14 +334,15 @@
   border-top: $datetime-ios-border-color;
 }
 
-:host .datetime-buttons ::slotted(ion-buttons),
-:host .datetime-buttons ion-buttons {
+:host .datetime-buttons,
+::slotted([slot="buttons"]) {
   display: flex;
 
   align-items: center;
   justify-content: space-between;
 }
 
-:host .datetime-action-buttons {
+:host .datetime-action-buttons,
+::slotted([slot="buttons"]) {
   width: 100%;
 }
diff --git a/core/src/components/datetime/datetime.md.scss b/core/src/components/datetime/datetime.md.scss
index 6d00afa3d00..b66c4536454 100644
--- a/core/src/components/datetime/datetime.md.scss
+++ b/core/src/components/datetime/datetime.md.scss
@@ -43,6 +43,28 @@
   --color: #{$text-color-step-350};
 }
 
+// These styles are copied from buttons.md.scss
+.calendar-next-prev ion-button {
+  --padding-top: 12px;
+  --padding-end: 12px;
+  --padding-bottom: 12px;
+  --padding-start: 12px;
+  --border-radius: 50%;
+
+  @include margin(0);
+
+  width: 3rem;
+  height: 3rem;
+}
+
+// These styles are copied from buttons.md.scss
+.calendar-next-prev ion-button ion-icon[slot="icon-only"] {
+  @include padding(0);
+  @include margin(0);
+
+  font-size: 1.8em;
+}
+
 .calendar-month-year-toggle {
   @include padding(12px, 16px, 12px, #{$datetime-md-header-padding});
 
@@ -166,6 +188,7 @@
 
 // Footer
 // -----------------------------------
+
 :host .datetime-buttons {
   @include padding(10px, 10px, 10px, 10px);
 
diff --git a/core/src/components/datetime/datetime.native.scss b/core/src/components/datetime/datetime.native.scss
index e000e207057..008852cd4c0 100644
--- a/core/src/components/datetime/datetime.native.scss
+++ b/core/src/components/datetime/datetime.native.scss
@@ -81,6 +81,12 @@
 // Time / Header
 // -----------------------------------
 
+:host .calendar-next-prev {
+  display: flex;
+
+  align-items: start;
+}
+
 :host(.datetime-presentation-time) .datetime-time {
   @include globals.padding(0);
 }
@@ -144,6 +150,6 @@ ion-picker {
 // Calendar / Footer / Action Buttons
 // -----------------------------------
 
-:host .datetime-action-buttons ion-buttons {
+:host .datetime-action-buttons {
   justify-content: space-between;
 }
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index 71b08a33098..d1c09ba875c 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -1585,41 +1585,39 @@ export class Datetime implements ComponentInterface {
             }}
           >
             <slot name="buttons">
-              <ion-buttons>
+              {showDefaultButtons && (
+                <ion-button
+                  id="cancel-button"
+                  color={this.color}
+                  onClick={() => this.cancel(true)}
+                  disabled={isButtonDisabled}
+                >
+                  {this.cancelText}
+                </ion-button>
+              )}
+              <div class="datetime-action-buttons-container">
+                {showClearButton && (
+                  <ion-button
+                    id="clear-button"
+                    color={this.color}
+                    onClick={() => clearButtonClick()}
+                    disabled={isButtonDisabled}
+                  >
+                    {this.clearText}
+                  </ion-button>
+                )}
                 {showDefaultButtons && (
                   <ion-button
-                    id="cancel-button"
+                    id="confirm-button"
+                    fill={confirmFill}
                     color={this.color}
-                    onClick={() => this.cancel(true)}
+                    onClick={() => this.confirm(true)}
                     disabled={isButtonDisabled}
                   >
-                    {this.cancelText}
+                    {this.doneText}
                   </ion-button>
                 )}
-                <div class="datetime-action-buttons-container">
-                  {showClearButton && (
-                    <ion-button
-                      id="clear-button"
-                      color={this.color}
-                      onClick={() => clearButtonClick()}
-                      disabled={isButtonDisabled}
-                    >
-                      {this.clearText}
-                    </ion-button>
-                  )}
-                  {showDefaultButtons && (
-                    <ion-button
-                      id="confirm-button"
-                      color={this.color}
-                      onClick={() => this.confirm(true)}
-                      disabled={isButtonDisabled}
-                      fill={confirmFill}
-                    >
-                      {this.doneText}
-                    </ion-button>
-                  )}
-                </div>
-              </ion-buttons>
+              </div>
             </slot>
           </div>
         </div>
@@ -2194,28 +2192,26 @@ export class Datetime implements ComponentInterface {
           </div>
 
           <div class="calendar-next-prev">
-            <ion-buttons>
-              <ion-button aria-label="Previous month" disabled={prevMonthDisabled} onClick={() => this.prevMonth()}>
-                <ion-icon
-                  dir={hostDir}
-                  aria-hidden="true"
-                  slot="icon-only"
-                  icon={datetimePreviousIcon}
-                  lazy={false}
-                  flipRtl
-                ></ion-icon>
-              </ion-button>
-              <ion-button aria-label="Next month" disabled={nextMonthDisabled} onClick={() => this.nextMonth()}>
-                <ion-icon
-                  dir={hostDir}
-                  aria-hidden="true"
-                  slot="icon-only"
-                  icon={datetimeNextIcon}
-                  lazy={false}
-                  flipRtl
-                ></ion-icon>
-              </ion-button>
-            </ion-buttons>
+            <ion-button aria-label="Previous month" disabled={prevMonthDisabled} onClick={() => this.prevMonth()}>
+              <ion-icon
+                dir={hostDir}
+                aria-hidden="true"
+                slot="icon-only"
+                icon={datetimePreviousIcon}
+                lazy={false}
+                flipRtl
+              ></ion-icon>
+            </ion-button>
+            <ion-button aria-label="Next month" disabled={nextMonthDisabled} onClick={() => this.nextMonth()}>
+              <ion-icon
+                dir={hostDir}
+                aria-hidden="true"
+                slot="icon-only"
+                icon={datetimeNextIcon}
+                lazy={false}
+                flipRtl
+              ></ion-icon>
+            </ion-button>
           </div>
         </div>
         <div class="calendar-days-of-week" aria-hidden="true">
diff --git a/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-ios-ltr-Mobile-Chrome-linux.png
index 3f5e7c8ae63..a773a68feb0 100644
Binary files a/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Chrome-linux.png
index 58771820175..aae3f464d54 100644
Binary files a/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Firefox-linux.png
index fdec6853925..5472d1ccaf7 100644
Binary files a/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts b/core/src/components/datetime/test/basic/datetime.e2e.ts
index c9a0f9615e7..3514bc9cf2c 100644
--- a/core/src/components/datetime/test/basic/datetime.e2e.ts
+++ b/core/src/components/datetime/test/basic/datetime.e2e.ts
@@ -265,6 +265,7 @@ configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, conf
       const datetime = page.locator('ion-datetime');
       await expect(datetime).toHaveScreenshot(screenshot(`datetime-footer-default-buttons`));
     });
+
     test('should render clear button', async ({ page }) => {
       await page.setContent('<ion-datetime value="2022-05-03" show-clear-button="true"></ion-datetime>', config);
 
@@ -274,6 +275,7 @@ configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, conf
       const datetime = page.locator('ion-datetime');
       await expect(datetime).toHaveScreenshot(screenshot(`datetime-footer-clear-button`));
     });
+
     test('should render default and clear buttons', async ({ page }) => {
       await page.setContent(
         '<ion-datetime value="2022-05-03" show-default-buttons="true" show-clear-button="true"></ion-datetime>',
@@ -292,23 +294,74 @@ configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, conf
       const datetime = page.locator('ion-datetime');
       await expect(datetime).toHaveScreenshot(screenshot(`datetime-footer-default-clear-buttons`));
     });
-    test('should render custom buttons', async ({ page }) => {
+
+    test('should render custom default buttons', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime value="2022-05-03">
+          <div slot="buttons">
+            <ion-button id="custom-cancel-button">Cancel</ion-button>
+            <ion-button id="custom-confirm-button">Done</ion-button>
+          </div>
+        </ion-datetime>
+      `,
+        config
+      );
+
+      const cancelButton = page.locator('ion-datetime #custom-cancel-button');
+      await expect(cancelButton).toBeVisible();
+
+      const confirmButton = page.locator('ion-datetime #custom-confirm-button');
+      await expect(confirmButton).toBeVisible();
+
+      const datetime = page.locator('ion-datetime');
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-footer-custom-default-buttons`));
+    });
+
+    test('should render custom clear button', async ({ page }) => {
       await page.setContent(
         `
         <ion-datetime value="2022-05-03">
-          <ion-buttons slot="buttons">
-            <ion-button id="custom-button" color="primary">Hello!</ion-button>
-          </ion-buttons>
+          <div slot="buttons">
+            <ion-button color="danger" id="custom-clear-button">Clear</ion-button>
+          </div>
         </ion-datetime>
       `,
         config
       );
 
-      const customButton = page.locator('ion-datetime #custom-button');
-      await expect(customButton).toBeVisible();
+      const clearButton = page.locator('ion-datetime #custom-clear-button');
+      await expect(clearButton).toBeVisible();
+
+      const datetime = page.locator('ion-datetime');
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-footer-custom-clear-button`));
+    });
+
+    test('should render custom default and clear buttons', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime value="2022-05-03">
+          <div slot="buttons">
+            <ion-button id="custom-cancel-button">Cancel</ion-button>
+            <ion-button color="danger" id="custom-clear-button">Clear</ion-button>
+            <ion-button id="custom-confirm-button">Done</ion-button>
+          </div>
+        </ion-datetime>
+      `,
+        config
+      );
+
+      const cancelButton = page.locator('ion-datetime #custom-cancel-button');
+      await expect(cancelButton).toBeVisible();
+
+      const clearButton = page.locator('ion-datetime #custom-clear-button');
+      await expect(clearButton).toBeVisible();
+
+      const confirmButton = page.locator('ion-datetime #custom-confirm-button');
+      await expect(confirmButton).toBeVisible();
 
       const datetime = page.locator('ion-datetime');
-      await expect(datetime).toHaveScreenshot(screenshot(`datetime-footer-custom-buttons`));
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-footer-custom-default-clear-buttons`));
     });
   });
 });
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 65b69fe4840..f0987c59c5f 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png
index ceecef9eff2..00672b597df 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Chrome-linux.png
index 41fa4104ae9..f7aa715ce1d 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Chrome-linux.png
index 9feb6f15abd..96bcc789c7c 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-ltr-Mobile-Chrome-linux.png
index 85bcf9bb077..bcc882456cc 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-rtl-Mobile-Chrome-linux.png
index 170184ec025..d8bfad76d05 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png
deleted file mode 100644
index 3f31876f80a..00000000000
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png
deleted file mode 100644
index 4b61d2d4d3d..00000000000
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png
deleted file mode 100644
index b24eed4d595..00000000000
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png
deleted file mode 100644
index e4b3d34756c..00000000000
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index 5cd9179adc6..00000000000
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index be34c41a1a7..00000000000
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index 27cf17419ea..00000000000
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index 8c962520757..00000000000
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index ea695c29e13..00000000000
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index 58b05321f0f..00000000000
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index 07dd60e6323..00000000000
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index 4ab84fe75ca..00000000000
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index 788c42cd6f1..00000000000
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index dfc254f83a8..00000000000
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index 4f81bc51c44..00000000000
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index 9c1db76a409..00000000000
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..7ebb4940af5
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..63f7a703700
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-ltr-light-Mobile-Safari-linux.png
similarity index 82%
rename from core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png
rename to core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-ltr-light-Mobile-Safari-linux.png
index ef1ca9775f7..61e44a15767 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..b53fbf7fa78
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..750013bbdf2
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-rtl-light-Mobile-Safari-linux.png
similarity index 83%
rename from core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png
rename to core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-rtl-light-Mobile-Safari-linux.png
index 94ad7268b55..f3c94a41fa8 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..3bf33161673
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d2d276d316c
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..d410d932ea8
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..50d941d8eaa
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..2cb3c22f07a
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..ac2e081abde
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..826917398d3
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a7425ce6a71
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..fe235867e1e
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..93f1ffe8712
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..8ea854b8155
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..1461abaf914
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..fca4fc2e9aa
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..f3e3850b965
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..50fb197922d
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..4fcd6a48a24
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..940b2f8e380
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..9708d293e3d
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..02e6c8e5b0c
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..531bdfed092
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..275d81aaee1
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..b32379f684c
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a95122b037a
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..9d9ad7da722
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..c5f71c60651
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a30e987b07a
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..339dd08d410
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f68b74cee93
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..59294aee2a3
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..803d154e197
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..7a3955c1aa6
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..9b0ad321dcc
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..691e1fa319d
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..81bcf2dfcc7
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..239a48bae9d
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..cb914a67255
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..b606b0456d6
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..cd33d75f3b6
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..35bdeee847f
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..2fc34270d7c
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..363088fbb74
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..4b274cc9109
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..95f1ab3785c
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..69ecce36e3a
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..bdacf7f5c69
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..5610a5b5284
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..316fe021399
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..756a73db247
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 5b3eafbf606..a76082cac2d 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 031fb9c9e12..6fabf6cb8ff 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Chrome-linux.png
index 38711f7d16a..3ba5845a395 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Chrome-linux.png
index 2a34483b708..d371a00b9a4 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-ltr-Mobile-Chrome-linux.png
index 74fa68cc087..c5f71c60651 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-rtl-Mobile-Chrome-linux.png
index 118686cbddb..f68b74cee93 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 8ddf0ebff87..38d650aae60 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 61f45399a97..f4e3a202745 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Chrome-linux.png
index e75b1490692..a84535fb85f 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Chrome-linux.png
index 6ee4b81e684..fb5f5a1398e 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-ltr-Mobile-Chrome-linux.png
index 9666c76739c..41712b44139 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-rtl-Mobile-Chrome-linux.png
index 19d69a3dd43..4233331f14b 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/index.html b/core/src/components/datetime/test/basic/index.html
index bc08196fbb8..e9f5dc1cc72 100644
--- a/core/src/components/datetime/test/basic/index.html
+++ b/core/src/components/datetime/test/basic/index.html
@@ -136,10 +136,10 @@ <h2>Popover - Custom</h2>
             <ion-popover class="datetime-popover" trigger="open-popover" id="custom-popover">
               <ion-datetime>
                 <span slot="title">My Custom Title</span>
-                <ion-buttons slot="buttons">
+                <div slot="buttons">
                   <ion-button color="danger">Destroy</ion-button>
                   <ion-button color="primary">Confirm</ion-button>
-                </ion-buttons>
+                </div>
               </ion-datetime>
             </ion-popover>
           </div>
@@ -150,10 +150,10 @@ <h2>Modal - Custom</h2>
             <ion-modal trigger="open-modal" id="modal">
               <ion-datetime>
                 <span slot="title">My Custom Title</span>
-                <ion-buttons slot="buttons">
+                <div slot="buttons">
                   <ion-button color="danger">Destroy</ion-button>
                   <ion-button color="primary">Confirm</ion-button>
-                </ion-buttons>
+                </div>
               </ion-datetime>
             </ion-modal>
           </div>
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-ios-ltr-Mobile-Chrome-linux.png
index a1a193fe0b1..f7a95eda213 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-ios-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-ios-ltr-dark-Mobile-Chrome-linux.png
index 569f575b68b..5444e77c0fd 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-ios-ltr-dark-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-ios-ltr-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-md-ltr-Mobile-Chrome-linux.png
index 39645929e52..a6bf7293dc2 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-md-ltr-dark-Mobile-Chrome-linux.png
index a488a8a747c..2c9fe1657d4 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-md-ltr-dark-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-md-ltr-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-md-ltr-Mobile-Firefox-linux.png
index b5883c2dc74..85ebffb1433 100644
Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-md-ltr-Mobile-Firefox-linux.png
index d0a468a1e9e..777dc1526bb 100644
Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-md-ltr-Mobile-Firefox-linux.png
index a389cd62f2e..c90659bcda1 100644
Binary files a/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-md-rtl-Mobile-Firefox-linux.png
index 510b62027c9..1ff656b4917 100644
Binary files a/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-ltr-Mobile-Chrome-linux.png
index 17bcaf03468..8153784415f 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-md-ltr-Mobile-Chrome-linux.png
index 718a7974a3a..3fd798a81a6 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-ltr-Mobile-Chrome-linux.png
index b9f35631e4e..bdc55b3ef69 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-md-ltr-Mobile-Chrome-linux.png
index 354074ce47f..aa271975a52 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-ltr-Mobile-Chrome-linux.png
index 5dcade52180..a39799fc95d 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-md-ltr-Mobile-Chrome-linux.png
index 6081313f604..ca3a9d53f4e 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-ltr-Mobile-Chrome-linux.png
index f83d75e7978..5ae4f80dbf1 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-md-ltr-Mobile-Chrome-linux.png
index 35f035bcded..0385732624b 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-ltr-Mobile-Chrome-linux.png
index b0e4bba755b..552e10959b7 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-md-ltr-Mobile-Chrome-linux.png
index ba57d08494b..d46aee41cd4 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-ltr-Mobile-Chrome-linux.png
index 71c9e27339f..b87eb80c6cd 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-md-ltr-Mobile-Chrome-linux.png
index defbc8af5d7..42c2a1968fd 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Chrome-linux.png
index 6d07fa93f2d..8f986b5afdc 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-md-ltr-Mobile-Chrome-linux.png
index 89af655f419..ced474124bb 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-ltr-Mobile-Chrome-linux.png
index 0057425d7c6..b9029cac810 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-ltr-Mobile-Chrome-linux.png
index 5714d63c701..7ff4caeab5a 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-ltr-Mobile-Chrome-linux.png
index 71c9e27339f..b87eb80c6cd 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-md-ltr-Mobile-Chrome-linux.png
index defbc8af5d7..42c2a1968fd 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/readonly/datetime.e2e.ts-snapshots/datetime-readonly-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/readonly/datetime.e2e.ts-snapshots/datetime-readonly-ios-ltr-Mobile-Chrome-linux.png
index 99b9bdf1ede..d57e192078f 100644
Binary files a/core/src/components/datetime/test/readonly/datetime.e2e.ts-snapshots/datetime-readonly-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/readonly/datetime.e2e.ts-snapshots/datetime-readonly-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-md-ltr-Mobile-Firefox-linux.png
index 9de6935f65a..d77203c2d39 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-md-ltr-Mobile-Firefox-linux.png
index 971a4be2a60..f6b38e60a97 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-md-ltr-Mobile-Firefox-linux.png
index 92ae494ccda..8e6d4039bc9 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-md-ltr-Mobile-Firefox-linux.png
index 23aff3d1d1d..6aff06f2b49 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-md-ltr-Mobile-Firefox-linux.png differ