Skip to content

feat(datetime): add new header parts #4402

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 new header parts #4402

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
5ecd33c
feat(datetime): add new calendar parts
thetaPC Feb 6, 2026
c22dadb
feat(datetime): add datetime part
thetaPC Feb 6, 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
11 changes: 11 additions & 0 deletions docs/api/datetime.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ import MultipleDateSelection from '@site/static/usage/v8/datetime/multiple/index
import GlobalTheming from '@site/static/usage/v8/datetime/styling/global-theming/index.md';
import CalendarHeaderStyling from '@site/static/usage/v8/datetime/styling/calendar-header/index.md';
import CalendarDaysStyling from '@site/static/usage/v8/datetime/styling/calendar-days/index.md';
import DatetimeHeaderStyling from '@site/static/usage/v8/datetime/styling/datetime-header/index.md';
import WheelStyling from '@site/static/usage/v8/datetime/styling/wheel-styling/index.md';

<head>
Expand Down Expand Up @@ -371,6 +372,16 @@ The example below selects the day 2 days ago, unless that day is in the previous

<CalendarDaysStyling />

### Datetime Header

The datetime header manages the content for the `title` slot and the selected date.

:::note
The selected date will not render if `preferWheel` is set to `true`.
:::

<DatetimeHeaderStyling />

### Wheel Pickers

The wheels used in `ion-datetime` can be styled through a combination of shadow parts and CSS variables. This applies to both the columns in wheel-style datetimes, and the month/year picker in grid-style datetimes.
Expand Down
23 changes: 22 additions & 1 deletion static/usage/v8/datetime/styling/calendar-header/angular/example_component_css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,30 @@
```css
/*
* Custom Datetime Calendar Header Part
* Custom Datetime Calendar Header Parts
* -------------------------------------------
*/
ion-datetime::part(calendar-header) {
background-color: orange;
}

ion-datetime::part(month-year-button) {
background-color: lightblue;
}

ion-datetime::part(prev-next-buttons) {
background-color: firebrick;
}

ion-datetime::part(prev-button) {
color: white;
}

ion-datetime::part(next-button) {
color: black;
}

ion-datetime::part(days-of-week) {
background-color: #9ad162;
color: white;
}
```
21 changes: 21 additions & 0 deletions static/usage/v8/datetime/styling/calendar-header/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,30 @@
* -------------------------------------------
*/

ion-datetime::part(calendar-header) {
background-color: orange;
}

ion-datetime::part(month-year-button) {
background-color: lightblue;
}

ion-datetime::part(prev-next-buttons) {
background-color: firebrick;
}

ion-datetime::part(prev-button) {
color: white;
}

ion-datetime::part(next-button) {
color: black;
}

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

Expand Down
23 changes: 22 additions & 1 deletion static/usage/v8/datetime/styling/calendar-header/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,32 @@

<style>
/*
* Custom Datetime Calendar Header Part
* Custom Datetime Calendar Header Parts
* -------------------------------------------
*/
ion-datetime::part(calendar-header) {
background-color: orange;
}

ion-datetime::part(month-year-button) {
background-color: lightblue;
}

ion-datetime::part(prev-next-buttons) {
background-color: firebrick;
}

ion-datetime::part(prev-button) {
color: white;
}

ion-datetime::part(next-button) {
color: black;
}

ion-datetime::part(days-of-week) {
background-color: #9ad162;
color: white;
}
</style>
```
23 changes: 22 additions & 1 deletion static/usage/v8/datetime/styling/calendar-header/react/main_css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,30 @@
```css
/*
* Custom Datetime Calendar Header Part
* Custom Datetime Calendar Header Parts
* -------------------------------------------
*/
ion-datetime::part(calendar-header) {
background-color: orange;
}

ion-datetime::part(month-year-button) {
background-color: lightblue;
}

ion-datetime::part(prev-next-buttons) {
background-color: firebrick;
}

ion-datetime::part(prev-button) {
color: white;
}

ion-datetime::part(next-button) {
color: black;
}

ion-datetime::part(days-of-week) {
background-color: #9ad162;
color: white;
}
```
21 changes: 21 additions & 0 deletions static/usage/v8/datetime/styling/calendar-header/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,29 @@
* Custom Datetime Calendar Header Part
* -------------------------------------------
*/
ion-datetime::part(calendar-header) {
background-color: orange;
}

ion-datetime::part(month-year-button) {
background-color: lightblue;
}

ion-datetime::part(prev-next-buttons) {
background-color: firebrick;
}

ion-datetime::part(prev-button) {
color: white;
}

ion-datetime::part(next-button) {
color: black;
}

ion-datetime::part(days-of-week) {
background-color: #9ad162;
color: white;
}
</style>
```
9 changes: 9 additions & 0 deletions static/usage/v8/datetime/styling/datetime-header/angular/example_component_css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
```css
/*
* Custom Datetime Header Part
* -------------------------------------------
*/
ion-datetime::part(datetime-header) {
background-color: orange;
}
```
5 changes: 5 additions & 0 deletions static/usage/v8/datetime/styling/datetime-header/angular/example_component_html.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
```html
<ion-datetime presentation="date">
<span slot="title">Select Date</span>
</ion-datetime>
```
12 changes: 12 additions & 0 deletions static/usage/v8/datetime/styling/datetime-header/angular/example_component_ts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
```ts
import { Component } from '@angular/core';
import { IonDatetime } from '@ionic/angular/standalone';

@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
styleUrls: ['./example.component.css'],
imports: [IonDatetime],
})
export class ExampleComponent {}
```
35 changes: 35 additions & 0 deletions static/usage/v8/datetime/styling/datetime-header/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Datetime</title>
<link rel="stylesheet" href="../../../common.css" />
<script src="../../../common.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />

<style>
/*
* Custom Datetime Header Part
* -------------------------------------------
*/

ion-datetime::part(datetime-header) {
background-color: orange;
}
</style>
</head>

<body>
<ion-app>
<ion-content>
<div class="container">
<ion-datetime presentation="date">
<span slot="title">Select Date</span>
</ion-datetime>
</div>
</ion-content>
</ion-app>
</body>
</html>
35 changes: 35 additions & 0 deletions static/usage/v8/datetime/styling/datetime-header/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import Playground from '@site/src/components/global/Playground';

import javascript from './javascript.md';

import react_main_tsx from './react/main_tsx.md';
import react_main_css from './react/main_css.md';

import vue from './vue.md';

import angular_example_component_html from './angular/example_component_html.md';
import angular_example_component_css from './angular/example_component_css.md';
import angular_example_component_ts from './angular/example_component_ts.md';

<Playground
version="8"
code={{
javascript,
react: {
files: {
'src/main.tsx': react_main_tsx,
'src/main.css': react_main_css,
},
},
vue,
angular: {
files: {
'src/app/example.component.html': angular_example_component_html,
'src/app/example.component.css': angular_example_component_css,
'src/app/example.component.ts': angular_example_component_ts,
},
},
}}
src="usage/v8/datetime/styling/datetime-header/demo.html"
size="450px"
/>
15 changes: 15 additions & 0 deletions static/usage/v8/datetime/styling/datetime-header/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
```html
<ion-datetime presentation="date">
<span slot="title">Select Date</span>
</ion-datetime>

<style>
/*
* Custom Datetime Header Part
* -------------------------------------------
*/
ion-datetime::part(datetime-header) {
background-color: orange;
}
</style>
```
9 changes: 9 additions & 0 deletions static/usage/v8/datetime/styling/datetime-header/react/main_css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
```css
/*
* Custom Datetime Header Part
* -------------------------------------------
*/
ion-datetime::part(datetime-header) {
background-color: orange;
}
```
17 changes: 17 additions & 0 deletions static/usage/v8/datetime/styling/datetime-header/react/main_tsx.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
```tsx
import React from 'react';
import { IonDatetime } from '@ionic/react';

import './main.css';

function Example() {
return (
<>
<IonDatetime presentation="date">
<span slot="title">Select Date</span>
</IonDatetime>
</>
);
}
export default Example;
```
22 changes: 22 additions & 0 deletions static/usage/v8/datetime/styling/datetime-header/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
```html
<template>
<ion-datetime presentation="date">
<span slot="title">Select Date</span>
</ion-datetime>
</template>

<script setup lang="ts">
import { IonDatetime } from '@ionic/vue';
</script>

<style scoped>
/*
* Custom Datetime Header Part
* -------------------------------------------
*/

ion-datetime::part(datetime-header) {
background-color: orange;
}
</style>
```