fix(datetime): don't setActiveParts from month/year wheels when multiple=true (#31248)

Issue number: resolves #29673

---------

## What is the current behavior?
Using the month/year selection wheels on an `ion-datetime` with
`multiple=true` changes the selection in an unintuitive manner and
changing the value of one of the wheels often reverts the value of the
other wheel.

## What is the new behavior?
- The month and year wheels in an `ion-datetime` no longer change the
selection when `multiple=true`
- The behavior of a single-select `ion-datetime` is unchanged.
- The fix has only been applied to `renderMonthPickerColumn` and
`renderYearPickerColumn`, as [per the
docs](https://ionicframework.com/docs/api/datetime#multiple-date-selection),
the `multiple` property is only supported on `presentation=date
preferWheel=false`, which only shows those two wheels.
- Four new datetime e2e tests have been added to test these changes

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

Author: droc101

core/src/components/datetime/datetime.tsx

@@ -1966,10 +1966,13 @@ export class Datetime implements ComponentInterface {
             month: ev.detail.value,
           });
 
-          this.setActiveParts({
-            ...activePart,
-            month: ev.detail.value,
-          });
+          // Month wheel is navigation-only in multi-select mode as a fix for https://github.com/ionic-team/ionic-framework/issues/29673
+          if (!this.multiple) {
+            this.setActiveParts({
+              ...activePart,
+              month: ev.detail.value,
+            });
+          }
 
           ev.stopPropagation();
         }}
@@ -2010,10 +2013,13 @@ export class Datetime implements ComponentInterface {
             year: ev.detail.value,
           });
 
-          this.setActiveParts({
-            ...activePart,
-            year: ev.detail.value,
-          });
+          // Year wheel is navigation-only in multi-select mode as a fix for https://github.com/ionic-team/ionic-framework/issues/29673
+          if (!this.multiple) {
+            this.setActiveParts({
+              ...activePart,
+              year: ev.detail.value,
+            });
+          }
 
           ev.stopPropagation();
         }}

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

@@ -337,3 +337,124 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
     });
   });
 });
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(
+    title('datetime: interaction between month/year wheels and selected date(s) with different values of multiple'),
+    () => {
+      test('using month wheel should change selection when multiple=false', async ({ page }, testInfo) => {
+        testInfo.annotations.push({
+          type: 'issue',
+          description: 'https://github.com/ionic-team/ionic-framework/issues/29673',
+        });
+
+        await page.setContent(`<ion-datetime value="2026-06-26T10:36:00" locale="en-US"></ion-datetime>`, config);
+        const datetime = page.locator('ion-datetime');
+
+        await page.waitForSelector('.datetime-ready');
+
+        const dropdownButton = page.locator('.calendar-month-year-toggle');
+        await dropdownButton.click();
+        await page.waitForChanges();
+
+        const monthOption = page.locator('.month-column ion-picker-column-option').nth(0);
+        await monthOption.click();
+        await page.waitForChanges();
+
+        await expect(datetime).toHaveJSProperty('value', '2026-01-26T10:36:00');
+      });
+
+      test('using month wheel should not change selection when multiple=true', async ({ page }, testInfo) => {
+        testInfo.annotations.push({
+          type: 'issue',
+          description: 'https://github.com/ionic-team/ionic-framework/issues/29673',
+        });
+
+        await page.setContent(
+          `
+        <ion-datetime multiple locale="en-US"></ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.value = [ "2026-06-26T10:36:00", "2026-06-28T10:36:00", "2026-01-01T10:36:00" ];
+        </script>
+      `,
+          config
+        );
+        const datetime = page.locator('ion-datetime');
+
+        await page.waitForSelector('.datetime-ready');
+
+        const dropdownButton = page.locator('.calendar-month-year-toggle');
+        await dropdownButton.click();
+        await page.waitForChanges();
+
+        const monthOption = page.locator('.month-column ion-picker-column-option').nth(0);
+        await monthOption.click();
+        await page.waitForChanges();
+
+        await expect(datetime).toHaveJSProperty('value', [
+          '2026-06-26T10:36:00',
+          '2026-06-28T10:36:00',
+          '2026-01-01T10:36:00',
+        ]);
+      });
+
+      test('using year wheel should change selection when multiple=false', async ({ page }, testInfo) => {
+        testInfo.annotations.push({
+          type: 'issue',
+          description: 'https://github.com/ionic-team/ionic-framework/issues/29673',
+        });
+
+        await page.setContent(`<ion-datetime value="2026-06-26T10:36:00" locale="en-US"></ion-datetime>`, config);
+        const datetime = page.locator('ion-datetime');
+
+        await page.waitForSelector('.datetime-ready');
+
+        const dropdownButton = page.locator('.calendar-month-year-toggle');
+        await dropdownButton.click();
+        await page.waitForChanges();
+
+        const yearOption = page.locator('.year-column ion-picker-column-option').nth(0);
+        await yearOption.click();
+        await page.waitForChanges();
+
+        await expect(datetime).toHaveJSProperty('value', '1926-06-26T10:36:00');
+      });
+
+      test('using year wheel should not change selection when multiple=true', async ({ page }, testInfo) => {
+        testInfo.annotations.push({
+          type: 'issue',
+          description: 'https://github.com/ionic-team/ionic-framework/issues/29673',
+        });
+
+        await page.setContent(
+          `
+        <ion-datetime multiple locale="en-US"></ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.value = [ "2026-06-26T10:36:00", "2026-06-28T10:36:00", "2026-01-01T10:36:00" ];
+        </script>
+      `,
+          config
+        );
+        const datetime = page.locator('ion-datetime');
+
+        await page.waitForSelector('.datetime-ready');
+
+        const dropdownButton = page.locator('.calendar-month-year-toggle');
+        await dropdownButton.click();
+        await page.waitForChanges();
+
+        const yearOption = page.locator('.year-column ion-picker-column-option').nth(0);
+        await yearOption.click();
+        await page.waitForChanges();
+
+        await expect(datetime).toHaveJSProperty('value', [
+          '2026-06-26T10:36:00',
+          '2026-06-28T10:36:00',
+          '2026-01-01T10:36:00',
+        ]);
+      });
+    }
+  );
+});