ion-datetime-button

shadow

日期时间按钮与 Datetime 组件关联，用于显示格式化后的日期和时间。它还提供按钮，以便在模态框、弹出层等界面中展示日期时间选择器。

概述

在空间受限的情况下应使用日期时间按钮。此组件显示展示当前日期和时间值的按钮。点击按钮时，日期或时间选择器将在叠加层中打开。

当在 Angular、React 或 Vue 等 JavaScript 框架中使用日期时间按钮时，请确保在 ion-modal 上使用 keepContentsMounted 属性 或在 ion-popover 上使用 keepContentsMounted 属性。这样即使在叠加层尚未显示时，关联的日期时间实例也能保持挂载状态。

基本用法

本地化

ion-datetime-button 上的本地化文本由关联的 ion-datetime 实例上的 locale 属性决定。更多详情请参阅 Datetime 本地化。

格式选项

您可以通过在关联的 Datetime 实例上提供 formatOptions 来自定义日期时间按钮中日期和时间的格式。更多详情请参阅 Datetime 格式选项。

与模态框和弹出层配合使用

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.