日期时间按钮组件
日期时间按钮与 Datetime 组件关联，用于显示格式化后的日期和时间。它还提供按钮以便在模态框、弹出层等界面中呈现日期时间选择器。
概览
当界面空间有限时，应使用日期时间按钮。该组件显示展示当前日期和时间值的按钮。点击按钮时，日期或时间选择器将在叠加层中打开。
当在 Angular、React 或 Vue 等 JavaScript 框架中使用日期时间按钮时，请确保在 ion-modal 上使用 keepContentsMounted 属性 或在 ion-popover 上使用 keepContentsMounted 属性。这允许关联的日期时间实例即使在叠加层尚未呈现时也能被挂载。
基本用法
本地化
ion-datetime-button 上的本地化文本由关联的 ion-datetime 实例的 locale 属性决定。更多详情请参阅 日期时间本地化。
格式选项
您可以通过在关联的日期时间实例上提供 formatOptions 来自定义日期时间按钮中日期和时间的格式。更多详情请参阅 日期时间格式选项。
与模态框和弹出层配合使用
ion-datetime-button 必须与已挂载的 ion-datetime 实例关联。因此，必须使用 内联模态框 和 内联弹出层 并将 keepContentsMounted 属性设置为 true。
属性
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 |
事件
No events available for this component.
方法
No public methods available for this component.
CSS Shadow Parts
| Name | Description |
|---|---|
native | The native HTML button that wraps the slotted text. |
CSS 自定义属性
No CSS custom properties available for this component.
插槽
| Name | Description |
|---|---|
date-target | Content displayed inside of the date button. |
time-target | Content displayed inside of the time button. |