fix(datetime): scroll failing for adjacent days on ios (#31033)

Issue number: resolves internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
When the user swipes to a previous month that has adjacent days and
selects one of the adjacent days from a previous month, the datetime
selects the day but fails to scroll to the previous month.

## What is the new behavior?
When a user clicks on a previous adjacent day after swiping the month,
the calendar scrolls to the previous month. The same is applied to the
next month.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

The previous behavior was only reproducible on iOS real devices.

Author: os-davidlourenco

core/src/components/datetime/datetime.tsx

@@ -1545,9 +1545,11 @@ export class Datetime implements ComponentInterface {
       return;
     }
 
+    const left = (prevMonth as HTMLElement).offsetWidth * 2;
+
     calendarBodyRef.scrollTo({
       top: 0,
-      left: 0,
+      left: left * (isRTL(this.el) ? 1 : -1),
       behavior: 'smooth',
     });
   };

core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts

@@ -1,9 +1,6 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-/**
- * This behavior does not vary across directions
- */
 configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('datetime: show adjacent days'), () => {
     test('should not have visual regressions', async ({ page }) => {
@@ -54,7 +51,11 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       const datetime = page.locator('#display');
       await expect(datetime).toHaveScreenshot(screenshot(`datetime-show-adjacent-days-display`));
     });
+  });
+});
 
+configs({ directions: ['ltr', 'rtl'] }).forEach(({ title, config }) => {
+  test.describe(title('datetime: show adjacent days'), () => {
     test('should return the same date format on current month days and on adjacent days', async ({ page }) => {
       await page.setContent(
         `
@@ -124,5 +125,51 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         value: '2022-11-22T16:22:00',
       });
     });
+
+    test('should navigate to previous month via swipe and then select adjacent day from prior month', async ({
+      page,
+    }) => {
+      await page.setContent(
+        `
+        <ion-datetime show-adjacent-days="true" value="2026-02-14T16:22:00.000Z" presentation="date"></ion-datetime>
+      `,
+        config
+      );
+
+      // Wait for the datetime to be ready.
+      await page.locator('.datetime-ready').waitFor();
+      const ionChange = await page.spyOnEvent('ionChange');
+      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
+      const calendarBody = page.locator('ion-datetime .calendar-body');
+
+      // Wait for the month to be visible.
+      await expect(calendarMonthYear).toHaveText('February 2026');
+
+      // Scroll to the previous month.
+      await calendarBody.evaluate((el: HTMLElement) => {
+        const rtl = document.documentElement.dir === 'rtl';
+        el.scrollLeft += rtl ? el.clientWidth * 2 : -el.clientWidth * 2;
+      });
+
+      // Wait for the month to change.
+      await page.waitForChanges();
+      await expect(calendarMonthYear).toHaveText('January 2026');
+
+      // Select the adjacent day from the prior month.
+      const dec31Adjacent = page.locator(
+        '.calendar-day-adjacent-day[data-month="12"][data-year="2025"][data-day="31"]'
+      );
+      await dec31Adjacent.click();
+
+      // Wait for the month to change.
+      await page.waitForChanges();
+
+      // Wait for the month to be visible.
+      await expect(calendarMonthYear).toHaveText('December 2025');
+      await ionChange.next();
+      await expect(ionChange).toHaveReceivedEventDetail({
+        value: '2025-12-31T16:22:00',
+      });
+    });
   });
 });