1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91---
title: 'ion-datetime-button'
---
import Props from '@ionic-internal/component-api/v7/datetime-button/props.md';
import Events from '@ionic-internal/component-api/v7/datetime-button/events.md';
import Methods from '@ionic-internal/component-api/v7/datetime-button/methods.md';
import Parts from '@ionic-internal/component-api/v7/datetime-button/parts.md';
import CustomProps from '@ionic-internal/component-api/v7/datetime-button/custom-props.mdx';
import Slots from '@ionic-internal/component-api/v7/datetime-button/slots.md';
<head>
<title>ion-datetime-button: Ionic Input for Datetime Picker</title>
<meta
name="description"
content="Datetime button links with a datetime instance to easily a datetime in a popover, modal, and more."
/>
</head>
import EncapsulationPill from '@components/page/api/EncapsulationPill';
<EncapsulationPill type="shadow" />
Datetime Button links with a [Datetime](./datetime) component to display the formatted date and time. It also provides buttons to present the datetime in a modal, popover, and more.
## Overview
Datetime Button should be used when space is constrained. This component displays buttons which show the current date and time values. When the buttons are tapped, the date or time pickers open in the overlay.
When using Datetime Button with a JavaScript framework such as Angular, React, or Vue be sure to use the [keepContentsMounted property on ion-modal](./modal#keepcontentsmounted) or the [keepContentsMounted property on ion-popover](./popover#keepcontentsmounted). This allows the linked datetime instance to be mounted even if the overlay has not been presented yet.
## Basic Usage
import Basic from '@site/static/usage/v7/datetime-button/basic/index.md';
<Basic />
## Localization
The localized text on `ion-datetime-button` is determined by the `locale` property on the associated `ion-datetime` instance. See [Datetime Localization](./datetime#localization) for more details.
## Format Options
You can customize the format of the date and time in a Datetime Button by providing `formatOptions` on the associated Datetime instance. See [Datetime Format Options](./datetime#format-options) for more details.
import FormatOptions from '@site/static/usage/v7/datetime-button/format-options/index.md';
<FormatOptions />
## Usage with Modals and Popovers
`ion-datetime-button` must be associated with a mounted `ion-datetime` instance. As a result, [Inline Modals](./modal#inline-modals-recommended) and [Inline Popovers](./popover#inline-popovers) with the `keepContentsMounted` property set to `true` must be used.
<!--
## Customization
TODO
### Buttons
TODO
### Theming
TODO
-->
## Properties
<Props />
## Events
<Events />
## Methods
<Methods />
## CSS Shadow Parts
<Parts />
## CSS Custom Properties
<CustomProps />
## Slots
<Slots />