Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 14 additions & 8 deletions core/src/components/datetime/datetime.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -1963,10 +1963,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) {
Comment thread
ShaneK marked this conversation as resolved.
this.setActiveParts({
...activePart,
month: ev.detail.value,
});
}

ev.stopPropagation();
}}
Expand Down Expand Up @@ -2007,10 +2010,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();
}}
Expand Down
121 changes: 121 additions & 0 deletions core/src/components/datetime/test/multiple/datetime.e2e.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
]);
});
}
);
});
Loading