ion-datetime-button
日期时间按钮与一个 Datetime 组件链接，以显示格式化的日期和时间。它还提供按钮以在模态窗口、弹出框等中显示日期时间。
🌐 Datetime Button links with a 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.
在使用与 Angular、React 或 Vue 等 JavaScript 框架配合的日期时间按钮时，请务必使用 ion-modal 上的 keepContentsMounted 属性 或 ion-popover 上的 keepContentsMounted 属性。这样即使覆盖层尚未渲染，关联的日期时间实例也能被挂载。
🌐 When using Datetime Button with a JavaScript framework such as Angular, React, or Vue be sure to use the keepContentsMounted property on ion-modal or the keepContentsMounted property on ion-popover. This allows the linked datetime instance to be mounted even if the overlay has not been presented yet.
基本用法
🌐 Basic Usage
本土化
🌐 Localization
ion-datetime-button 上的本地化文本由关联的 ion-datetime 实例上的 locale 属性决定。更多详细信息请参见 日期时间本地化。
🌐 The localized text on ion-datetime-button is determined by the locale property on the associated ion-datetime instance. See Datetime Localization for more details.
格式选项
🌐 Format Options
你可以通过在相关的日期时间实例上提供 formatOptions 来自定义日期时间按钮中的日期和时间格式。有关更多详细信息，请参阅 日期时间格式选项。
🌐 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 for more details.
与模态框和弹出框一起使用
🌐 Usage with Modals and Popovers
ion-datetime-button 必须与已挂载的 ion-datetime 实例关联。因此，必须使用 keepContentsMounted 属性设置为 true 的 内联模态 和 内联弹出框。
属性
🌐 Properties
color
| Description | The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming. |
| Attribute | color |
| Type | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined |
| Default | 'primary' |
datetime
| Description | The ID of the ion-datetime instance associated with the datetime button. |
| Attribute | datetime |
| Type | string ｜ undefined |
| Default | undefined |
disabled
| Description | If true, the user cannot interact with the button. |
| Attribute | disabled |
| Type | boolean |
| Default | false |
mode
| Description | The mode determines which platform styles to use. This is a virtual property that is set once during initialization and will not update if you change its value after the initial render. |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
事件
🌐 Events
No events available for this component.
方法
🌐 Methods
No public methods available for this component.
CSS 阴影部分
🌐 CSS Shadow Parts
| Name | Description |
|---|---|
native | The native HTML button that wraps the slotted text. |
CSS 自定义属性
🌐 CSS Custom Properties
No CSS custom properties available for this component.
插槽
🌐 Slots
| Name | Description |
|---|---|
date-target | Content displayed inside of the date button. |
time-target | Content displayed inside of the time button. |