Skip to content

Commit c22dadb

Browse files
thetaPCthetaPC
committed
feat(datetime): add datetime part
1 parent 5ecd33c commit c22dadb

10 files changed

Lines changed: 170 additions & 0 deletions

File tree

‎docs/api/datetime.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ import MultipleDateSelection from '@site/static/usage/v8/datetime/multiple/index
4343
import GlobalTheming from '@site/static/usage/v8/datetime/styling/global-theming/index.md';
4444
import CalendarHeaderStyling from '@site/static/usage/v8/datetime/styling/calendar-header/index.md';
4545
import CalendarDaysStyling from '@site/static/usage/v8/datetime/styling/calendar-days/index.md';
46+
import DatetimeHeaderStyling from '@site/static/usage/v8/datetime/styling/datetime-header/index.md';
4647
import WheelStyling from '@site/static/usage/v8/datetime/styling/wheel-styling/index.md';
4748

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

372373
<CalendarDaysStyling />
373374

375+
### Datetime Header
376+
377+
The datetime header manages the content for the `title` slot and the selected date.
378+
379+
:::note
380+
The selected date will not render if `preferWheel` is set to `true`.
381+
:::
382+
383+
<DatetimeHeaderStyling />
384+
374385
### Wheel Pickers
375386

376387
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.

‎static/usage/v8/datetime/styling/datetime-header/angular/example_component_css.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
```css
2+
/*
3+
* Custom Datetime Header Part
4+
* -------------------------------------------
5+
*/
6+
ion-datetime::part(datetime-header) {
7+
background-color: orange;
8+
}
9+
```

‎static/usage/v8/datetime/styling/datetime-header/angular/example_component_html.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
```html
2+
<ion-datetime presentation="date">
3+
<span slot="title">Select Date</span>
4+
</ion-datetime>
5+
```

‎static/usage/v8/datetime/styling/datetime-header/angular/example_component_ts.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import { IonDatetime } from '@ionic/angular/standalone';
4+
5+
@Component({
6+
selector: 'app-example',
7+
templateUrl: 'example.component.html',
8+
styleUrls: ['./example.component.css'],
9+
imports: [IonDatetime],
10+
})
11+
export class ExampleComponent {}
12+
```

‎static/usage/v8/datetime/styling/datetime-header/demo.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Datetime</title>
7+
<link rel="stylesheet" href="../../../common.css" />
8+
<script src="../../../common.js"></script>
9+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
11+
12+
<style>
13+
/*
14+
* Custom Datetime Header Part
15+
* -------------------------------------------
16+
*/
17+
18+
ion-datetime::part(datetime-header) {
19+
background-color: orange;
20+
}
21+
</style>
22+
</head>
23+
24+
<body>
25+
<ion-app>
26+
<ion-content>
27+
<div class="container">
28+
<ion-datetime presentation="date">
29+
<span slot="title">Select Date</span>
30+
</ion-datetime>
31+
</div>
32+
</ion-content>
33+
</ion-app>
34+
</body>
35+
</html>

‎static/usage/v8/datetime/styling/datetime-header/index.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
5+
import react_main_tsx from './react/main_tsx.md';
6+
import react_main_css from './react/main_css.md';
7+
8+
import vue from './vue.md';
9+
10+
import angular_example_component_html from './angular/example_component_html.md';
11+
import angular_example_component_css from './angular/example_component_css.md';
12+
import angular_example_component_ts from './angular/example_component_ts.md';
13+
14+
<Playground
15+
version="8"
16+
code={{
17+
javascript,
18+
react: {
19+
files: {
20+
'src/main.tsx': react_main_tsx,
21+
'src/main.css': react_main_css,
22+
},
23+
},
24+
vue,
25+
angular: {
26+
files: {
27+
'src/app/example.component.html': angular_example_component_html,
28+
'src/app/example.component.css': angular_example_component_css,
29+
'src/app/example.component.ts': angular_example_component_ts,
30+
},
31+
},
32+
}}
33+
src="usage/v8/datetime/styling/datetime-header/demo.html"
34+
size="450px"
35+
/>

‎static/usage/v8/datetime/styling/datetime-header/javascript.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
```html
2+
<ion-datetime presentation="date">
3+
<span slot="title">Select Date</span>
4+
</ion-datetime>
5+
6+
<style>
7+
/*
8+
* Custom Datetime Header Part
9+
* -------------------------------------------
10+
*/
11+
ion-datetime::part(datetime-header) {
12+
background-color: orange;
13+
}
14+
</style>
15+
```

‎static/usage/v8/datetime/styling/datetime-header/react/main_css.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
```css
2+
/*
3+
* Custom Datetime Header Part
4+
* -------------------------------------------
5+
*/
6+
ion-datetime::part(datetime-header) {
7+
background-color: orange;
8+
}
9+
```

‎static/usage/v8/datetime/styling/datetime-header/react/main_tsx.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonDatetime } from '@ionic/react';
4+
5+
import './main.css';
6+
7+
function Example() {
8+
return (
9+
<>
10+
<IonDatetime presentation="date">
11+
<span slot="title">Select Date</span>
12+
</IonDatetime>
13+
</>
14+
);
15+
}
16+
export default Example;
17+
```

‎static/usage/v8/datetime/styling/datetime-header/vue.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
```html
2+
<template>
3+
<ion-datetime presentation="date">
4+
<span slot="title">Select Date</span>
5+
</ion-datetime>
6+
</template>
7+
8+
<script setup lang="ts">
9+
import { IonDatetime } from '@ionic/vue';
10+
</script>
11+
12+
<style scoped>
13+
/*
14+
* Custom Datetime Header Part
15+
* -------------------------------------------
16+
*/
17+
18+
ion-datetime::part(datetime-header) {
19+
background-color: orange;
20+
}
21+
</style>
22+
```

0 commit comments

Comments
 (0)