Skip to content

feat(datetime): add header parts #30945

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
thetaPC wants to merge 2 commits into
base: feature-8.8
Choose a base branch
from
Open

feat(datetime): add header parts #30945

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d9b4f9e
feat(datetime): add header parts to grid style
thetaPC Feb 4, 2026
fda0949
feat(datetime): add parts to calendar-header and datetime-header
thetaPC Feb 5, 2026
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
6 changes: 6 additions & 0 deletions core/api.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -566,7 +566,13 @@ ion-datetime,part,calendar-day
ion-datetime,part,calendar-day active
ion-datetime,part,calendar-day disabled
ion-datetime,part,calendar-day today
ion-datetime,part,calendar-header
ion-datetime,part,datetime-header
ion-datetime,part,days-of-week
ion-datetime,part,month-year-button
ion-datetime,part,next-button
ion-datetime,part,prev-button
ion-datetime,part,prev-next-buttons
ion-datetime,part,time-button
ion-datetime,part,time-button active
ion-datetime,part,wheel
Expand Down
27 changes: 22 additions & 5 deletions core/src/components/datetime/datetime.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,14 +88,21 @@ import { checkForPresentationFormatMismatch, warnIfTimeZoneProvided } from './ut
* layout with `presentation="date-time"` or `"time-date"`.
* @part time-button active - The time picker button when the picker is open.
*
* @part calendar-header - The calendar header manages the date navigation controls (month/year picker and prev/next buttons) and the days of the week when using a grid style layout.
* @part month-year-button - The button that opens the month/year picker when
* using a grid style layout.
* @part prev-next-buttons - The buttons used to navigate to the next or previous month when using a grid style layout.
* @part prev-button - The button used to navigate to the previous month when using a grid style layout.
* @part next-button - The button used to navigate to the next month when using a grid style layout.
* @part days-of-week - The container for the day-of-the-week header (both weekdays and weekends) when using a grid style layout.
*
* @part calendar-day - The individual buttons that display a day inside of the datetime
* calendar.
* @part calendar-day active - The currently selected calendar day.
* @part calendar-day today - The calendar day that contains the current day.
* @part calendar-day disabled - The calendar day that is disabled.
*
* @part datetime-header - The datetime header contains the content for the `title` slot and the selected date.
*/
@Component({
tag: 'ion-datetime',
Expand Down Expand Up @@ -2166,7 +2173,7 @@ export class Datetime implements ComponentInterface {
const hostDir = this.el.getAttribute('dir') || undefined;

return (
<div class="calendar-header">
<div class="calendar-header" part="calendar-header">
<div class="calendar-action-buttons">
<div class="calendar-month-year">
<button
Expand Down Expand Up @@ -2195,7 +2202,12 @@ export class Datetime implements ComponentInterface {

<div class="calendar-next-prev">
<ion-buttons>
<ion-button aria-label="Previous month" disabled={prevMonthDisabled} onClick={() => this.prevMonth()}>
<ion-button
aria-label="Previous month"
disabled={prevMonthDisabled}
onClick={() => this.prevMonth()}
part="prev-next-buttons prev-button"
>
<ion-icon
dir={hostDir}
aria-hidden="true"
Expand All @@ -2205,7 +2217,12 @@ export class Datetime implements ComponentInterface {
flipRtl
></ion-icon>
</ion-button>
<ion-button aria-label="Next month" disabled={nextMonthDisabled} onClick={() => this.nextMonth()}>
<ion-button
aria-label="Next month"
disabled={nextMonthDisabled}
onClick={() => this.nextMonth()}
part="prev-next-buttons next-button"
>
<ion-icon
dir={hostDir}
aria-hidden="true"
Expand All @@ -2218,7 +2235,7 @@ export class Datetime implements ComponentInterface {
</ion-buttons>
</div>
</div>
<div class="calendar-days-of-week" aria-hidden="true">
<div class="calendar-days-of-week" aria-hidden="true" part="days-of-week">
{getDaysOfWeek(this.locale, mode, this.firstDayOfWeek % 7).map((d) => {
return <div class="day-of-week">{d}</div>;
})}
Expand Down Expand Up @@ -2571,7 +2588,7 @@ export class Datetime implements ComponentInterface {
}

return (
<div class="datetime-header">
<div class="datetime-header" part="datetime-header">
<div class="datetime-title">
<slot name="title">Select Date</slot>
</div>
Expand Down
199 changes: 199 additions & 0 deletions core/src/components/datetime/test/custom/datetime.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,205 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {

expect(backgroundColor).toBe('rgb(0, 0, 255)');
});

test('should be able to customize datetime header part', async ({ page }, testInfo) => {
testInfo.annotations.push({
type: 'issue',
description: 'https://github.com/ionic-team/ionic-framework/issues/30083',
});

await page.setContent(
`
<style>
ion-datetime::part(datetime-header) {
background-color: orange;
}
</style>
<ion-datetime value="2020-03-14T14:23:00.000Z">
<span slot="title">Select Date</span>
</ion-datetime>
`,
config
);

const datetime = page.locator('ion-datetime');
const header = datetime.locator('.datetime-header');

const backgroundColor = await header.evaluate((el) => {
return window.getComputedStyle(el).backgroundColor;
});

expect(backgroundColor).toBe('rgb(255, 165, 0)');
});

test('should be able to customize calendar header part within the grid style', async ({ page }) => {
await page.setContent(
`
<style>
ion-datetime::part(calendar-header) {
background-color: orange;
}
</style>
<ion-datetime value="2020-03-14T14:23:00.000Z"></ion-datetime>
`,
config
);

const datetime = page.locator('ion-datetime');
const header = datetime.locator('.calendar-header');

const backgroundColor = await header.evaluate((el) => {
return window.getComputedStyle(el).backgroundColor;
});

expect(backgroundColor).toBe('rgb(255, 165, 0)');
});

test('should be able to customize month/year picker part within the grid style', async ({ page }, testInfo) => {
Copy link
Contributor Author

@thetaPC thetaPC Feb 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We didn't have a test for this so I added it.

testInfo.annotations.push({
type: 'issue',
description: 'https://github.com/ionic-team/ionic-framework/issues/26596',
});

await page.setContent(
`
<style>
ion-datetime::part(month-year-button) {
background-color: lightblue;
}
</style>
<ion-datetime value="2020-03-14T14:23:00.000Z"></ion-datetime>
`,
config
);

const datetime = page.locator('ion-datetime');
const monthYearButton = datetime.locator('.calendar-month-year-toggle');

const backgroundColor = await monthYearButton.evaluate((el) => {
return window.getComputedStyle(el).backgroundColor;
});

expect(backgroundColor).toBe('rgb(173, 216, 230)');
});

test('should be able to customize prev/next buttons part within the grid style', async ({ page }, testInfo) => {
testInfo.annotations.push({
type: 'issue',
description: 'https://github.com/ionic-team/ionic-framework/issues/30830',
});

await page.setContent(
`
<style>
ion-datetime::part(prev-next-buttons) {
background-color: firebrick;
}
</style>
<ion-datetime value="2020-03-14T14:23:00.000Z"></ion-datetime>
`,
config
);

const datetime = page.locator('ion-datetime');
const prevButton = datetime.locator('.calendar-next-prev ion-button').first();
const nextButton = datetime.locator('.calendar-next-prev ion-button').last();

const prevBackgroundColor = await prevButton.evaluate((el) => {
return window.getComputedStyle(el).backgroundColor;
});

const nextBackgroundColor = await nextButton.evaluate((el) => {
return window.getComputedStyle(el).backgroundColor;
});

expect(prevBackgroundColor).toBe('rgb(178, 34, 34)');
expect(nextBackgroundColor).toBe('rgb(178, 34, 34)');
});

test('should be able to customize prev button part within the grid style', async ({ page }, testInfo) => {
testInfo.annotations.push({
type: 'issue',
description: 'https://github.com/ionic-team/ionic-framework/issues/30830',
});

await page.setContent(
`
<style>
ion-datetime::part(prev-button) {
color: blue;
}
</style>
<ion-datetime value="2020-03-14T14:23:00.000Z"></ion-datetime>
`,
config
);

const datetime = page.locator('ion-datetime');
const prevButton = datetime.locator('.calendar-next-prev ion-button').first();

const color = await prevButton.evaluate((el) => {
return window.getComputedStyle(el).color;
});

expect(color).toBe('rgb(0, 0, 255)');
});

test('should be able to customize next button part within the grid style', async ({ page }, testInfo) => {
testInfo.annotations.push({
type: 'issue',
description: 'https://github.com/ionic-team/ionic-framework/issues/30830',
});

await page.setContent(
`
<style>
ion-datetime::part(next-button) {
color: blue;
}
</style>
<ion-datetime value="2020-03-14T14:23:00.000Z"></ion-datetime>
`,
config
);

const datetime = page.locator('ion-datetime');
const nextButton = datetime.locator('.calendar-next-prev ion-button').last();

const color = await nextButton.evaluate((el) => {
return window.getComputedStyle(el).color;
});

expect(color).toBe('rgb(0, 0, 255)');
});

test('should be able to customize days of the week part within the grid style', async ({ page }, testInfo) => {
testInfo.annotations.push({
type: 'issue',
description: 'https://github.com/ionic-team/ionic-framework/issues/30830',
});

await page.setContent(
`
<style>
ion-datetime::part(days-of-week) {
background-color: #9ad162;
}
</style>
<ion-datetime value="2020-03-14T14:23:00.000Z"></ion-datetime>
`,
config
);

const datetime = page.locator('ion-datetime');
const daysOfWeek = datetime.locator('.calendar-days-of-week');

const backgroundColor = await daysOfWeek.evaluate((el) => {
return window.getComputedStyle(el).backgroundColor;
});

expect(backgroundColor).toBe('rgb(154, 209, 98)');
});
});
});

Expand Down
37 changes: 37 additions & 0 deletions core/src/components/datetime/test/custom/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,38 @@
background-color: rgb(154 209 98 / 0.2);
color: #9ad162;
}

/*
* Custom Datetime Header Parts
* -------------------------------------------
*/

#custom-grid::part(calendar-header),
#custom-title::part(datetime-header) {
background-color: orange;
}

#custom-grid::part(month-year-button) {
background-color: lightblue;
color: rgb(128, 30, 171);
}

#custom-grid::part(prev-next-buttons) {
background-color: firebrick;
}

#custom-grid::part(prev-button) {
color: white;
}

#custom-grid::part(next-button) {
color: black;
}

#custom-grid::part(days-of-week) {
background-color: #9ad162;
color: white;
}
</style>
</head>

Expand Down Expand Up @@ -163,6 +195,11 @@ <h2>Wheel Style</h2>
<h2>Grid Style</h2>
<ion-datetime id="custom-calendar-days" value="2023-06-15" presentation="date"></ion-datetime>
</div>
<div class="grid-item">
<ion-datetime id="custom-title" presentation="date">
<span slot="title">Select Date</span>
</ion-datetime>
</div>
</div>
</ion-content>
</ion-app>
Expand Down
Loading