fix(datetime): respect config animated setting when paging month calendar (#31227)

Issue number: resolves #30484

---------

## What is the current behavior?
Paging through the month calendar in an <IonDatetime> always scrolls
smoothly regardless of the `animated` property in global config

## What is the new behavior?
Paging will scroll instantly (no animation) if `animated` is false,
otherwise the previous smooth scroll behavior persists

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

Author: droc101

core/src/components/datetime/datetime.tsx

@@ -8,6 +8,7 @@ import { isRTL } from '@utils/rtl';
 import { createColorClasses } from '@utils/theme';
 import { caretDownSharp, caretUpSharp, chevronBack, chevronDown, chevronForward } from 'ionicons/icons';
 
+import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import type { Color, Mode, StyleEventDetail } from '../../interface';
 
@@ -1567,10 +1568,11 @@ export class Datetime implements ComponentInterface {
 
     const left = (nextMonth as HTMLElement).offsetWidth * 2;
 
+    const scrollMode = config.getBoolean('animated', true) ? 'smooth' : 'instant';
     calendarBodyRef.scrollTo({
       top: 0,
       left: left * (isRTL(this.el) ? -1 : 1),
-      behavior: 'smooth',
+      behavior: scrollMode,
     });
   };
 
@@ -1587,10 +1589,11 @@ export class Datetime implements ComponentInterface {
 
     const left = (prevMonth as HTMLElement).offsetWidth * 2;
 
+    const scrollMode = config.getBoolean('animated', true) ? 'smooth' : 'instant';
     calendarBodyRef.scrollTo({
       top: 0,
       left: left * (isRTL(this.el) ? 1 : -1),
-      behavior: 'smooth',
+      behavior: scrollMode,
     });
   };
 

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

@@ -816,3 +816,83 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
     });
   });
 });
+
+/**
+ * This behavior does not differ across
+ * modes/directions.
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('datetime: animated'), () => {
+    test('next month button should instantly replace month view when animations are disabled', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30484',
+      });
+
+      await page.addInitScript(() => {
+        (window as any).__scrollToCalls = [];
+        const original = Element.prototype.scrollTo;
+        Element.prototype.scrollTo = function (this: Element, ...args: any[]) {
+          if (this.classList?.contains('calendar-body')) {
+            (window as any).__scrollToCalls.push(args[0]);
+          }
+          return (original as any).apply(this, args);
+        };
+      });
+
+      await page.setContent(
+        `
+              <script>window.Ionic = {config: {animated: false}};</script>
+              <ion-datetime value="2026-06-19T16:08:25.697Z"></ion-datetime>
+              `,
+        config
+      );
+      await page.locator('.datetime-ready').waitFor();
+
+      const nextMonthButton = page.locator('ion-datetime .calendar-next-prev ion-button').nth(1);
+      await nextMonthButton.click();
+      await page.waitForChanges();
+
+      const scrollCalls = await page.evaluate(() => (window as any).__scrollToCalls);
+
+      expect(scrollCalls.length).toBeGreaterThan(0);
+      expect(scrollCalls[0].behavior).toBe('instant');
+    });
+
+    test('previous month button should instantly replace month view when animations are disabled', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30484',
+      });
+
+      await page.addInitScript(() => {
+        (window as any).__scrollToCalls = [];
+        const original = Element.prototype.scrollTo;
+        Element.prototype.scrollTo = function (this: Element, ...args: any[]) {
+          if (this.classList?.contains('calendar-body')) {
+            (window as any).__scrollToCalls.push(args[0]);
+          }
+          return (original as any).apply(this, args);
+        };
+      });
+
+      await page.setContent(
+        `
+              <script>window.Ionic = {config: {animated: false}};</script>
+              <ion-datetime value="2026-06-19T16:08:25.697Z"></ion-datetime>
+              `,
+        config
+      );
+      await page.locator('.datetime-ready').waitFor();
+
+      const prevMonthButton = page.locator('ion-datetime .calendar-next-prev ion-button').nth(0);
+      await prevMonthButton.click();
+      await page.waitForChanges();
+
+      const scrollCalls = await page.evaluate(() => (window as any).__scrollToCalls);
+
+      expect(scrollCalls.length).toBeGreaterThan(0);
+      expect(scrollCalls[0].behavior).toBe('instant');
+    });
+  });
+});