fix(datetime): flip chevron icons when RTL is set on component directly

core/package.json

@@ -32,7 +32,7 @@
   ],
   "dependencies": {
     "@stencil/core": "^2.18.0",
-    "ionicons": "^6.0.3",
+    "ionicons": "^6.0.4",
     "tslib": "^2.1.0"
   },
   "devDependencies": {

core/src/components/datetime/datetime.tsx

@@ -1859,6 +1859,9 @@ export class Datetime implements ComponentInterface {
     const prevMonthDisabled = isPrevMonthDisabled(this.workingParts, this.minParts, this.maxParts);
     const nextMonthDisabled = isNextMonthDisabled(this.workingParts, this.maxParts);
 
+    // don't use the inheritAttributes util because it removes dir from the host, and we still need that
+    const hostDir = this.el.getAttribute('dir') || undefined;
+
     return (
       <div class="calendar-header">
         <div class="calendar-action-buttons">
@@ -1878,10 +1881,24 @@ export class Datetime implements ComponentInterface {
           <div class="calendar-next-prev">
             <ion-buttons>
               <ion-button aria-label="previous month" disabled={prevMonthDisabled} onClick={() => this.prevMonth()}>
-                <ion-icon aria-hidden="true" slot="icon-only" icon={chevronBack} lazy={false} flipRtl></ion-icon>
+                <ion-icon
+                  dir={hostDir}
+                  aria-hidden="true"
+                  slot="icon-only"
+                  icon={chevronBack}
+                  lazy={false}
+                  flipRtl
+                ></ion-icon>
               </ion-button>
               <ion-button aria-label="next month" disabled={nextMonthDisabled} onClick={() => this.nextMonth()}>
-                <ion-icon aria-hidden="true" slot="icon-only" icon={chevronForward} lazy={false} flipRtl></ion-icon>
+                <ion-icon
+                  dir={hostDir}
+                  aria-hidden="true"
+                  slot="icon-only"
+                  icon={chevronForward}
+                  lazy={false}
+                  flipRtl
+                ></ion-icon>
               </ion-button>
             </ion-buttons>
           </div>

core/src/components/datetime/test/basic/datetime.e2e.ts

@@ -312,3 +312,18 @@ test.describe('datetime: visibility', () => {
     await expect(monthYearInterface).toBeHidden();
   });
 });
+
+test.describe('datetime: RTL set on component', () => {
+  test('should flip icons when RTL is set on component directly', async ({ page, skip }) => {
+    skip.rtl(); // we're setting RTL on the component instead
+    skip.mode('md');
+
+    await page.setContent(`
+      <ion-datetime dir="rtl"></ion-datetime>
+    `);
+
+    const nextPrevIcons = page.locator('ion-datetime .calendar-next-prev ion-icon');
+    await expect(nextPrevIcons.first()).toHaveClass(/flip-rtl/);
+    await expect(nextPrevIcons.last()).toHaveClass(/flip-rtl/);
+  });
+});