bug: ion-datetime Month Navigation Fails in RTL Mode"

[AdrienJacquard]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

When an ion-datetime element with presentation="date" is wrapped in a container set to RTL mode (dir="rtl"), clicking on the left or right arrows does not change the current month as expected. This behavior is observed regardless of the device or browser being used. The issue specifically occurs when the direction is set to RTL; switching back to LTR (dir="ltr") resolves the issue and the month changes as expected when the arrows are clicked. This problem presents a significant usability concern for RTL users, who cannot navigate through months in the date picker.

Expected Behavior

Users should be able to navigate through months in the ion-datetime date picker by clicking on the left or right arrows, irrespective of the text direction setting (RTL or LTR). The component should consistently allow month navigation in RTL mode, ensuring a seamless and inclusive experience for all users, including those requiring RTL layouts.

Steps to Reproduce

1. Create an Ionic application that includes an ion-datetime element with presentation="date" and binds it to a model with [(ngModel)]="datetime".
2. Wrap the ion-datetime element in a container and set the direction to RTL (dir="rtl").
3. Run the application and attempt to change the month in the date picker by clicking on the left or right arrows.
4. Observe that clicking the arrows does not change the current month when in RTL mode, unlike when the direction is set to LTR, where the functionality works as expected.

Code Reproduction URL

https://stackblitz.com/edit/ionic-rtl-calendar-issue

Ionic Info

Ionic:

   Ionic CLI                     : 7.2.0 (C:\Users\adrie\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 7.6.6
   @angular-devkit/build-angular : 17.1.1
   @angular-devkit/schematics    : 17.1.1
   @angular/cli                  : 17.1.1
   @ionic/angular-toolkit        : 11.0.1

Capacitor:

   Capacitor CLI      : 5.6.0
   @capacitor/android : 5.6.0
   @capacitor/core    : 5.6.0
   @capacitor/ios     : 5.6.0

Cordova:

   Cordova CLI       : not installed
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

   cordova-res : not installed globally
   native-run  : 2.0.0

System:

   NodeJS : v20.10.0 (C:\Program Files\nodejs\node.exe)
   npm    : 10.2.3
   OS     : Windows 10

Additional Information

No response

[amandaejohnston]

Thank you for the issue. I can reproduce this, but need to figure out why exactly it's happening. Many pieces of the month navigation need to have their logic flipped to account for RTL, so it's possible we missed something along those lines.

[liamdebeasi]

Thanks for the issue. This has been resolved via #29421, and a fix will be available in an upcoming release of Ionic Framework.