ion-datetime-button
Datetime Button 与 Datetime 组件关联,以显示格式化后的日期和时间。它还提供按钮,用于在模态框、弹出框等中展示日期时间。
概述
Datetime Button 应在空间受限时使用。该组件显示当前日期和时间值的按钮。点击按钮时,日期或时间选择器会在覆盖层中打开。
在将 Datetime Button 与 Angular、React 或 Vue 等 JavaScript 框架一起使用时,请确保使用 ion-modal 上的 keepContentsMounted 属性 或 ion-popover 上的 keepContentsMounted 属性。这允许关联的 datetime 实例在覆盖层尚未显示时就被挂载。
基本用法
本地化
ion-datetime-button 上的本地化文本由关联的 ion-datetime 实例上的 locale 属性决定。更多详情请参阅 Datetime 本地化。
格式选项
您可以通过在关联的 Datetime 实例上提供 formatOptions 来自定义 Datetime Button 中日期和时间的格式。更多详情请参阅 Datetime 格式选项。
与模态框和弹出框一起使用
ion-datetime-button 必须与已挂载的 ion-datetime 实例关联。因此,必须使用将 keepContentsMounted 属性设置为 true 的内联模态框和内联弹出框。
属性
color
| 说明 | 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. |
| 属性 | color |
| 类型 | "danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined |
| 默认值 | 'primary' |
datetime
| 说明 | The ID of the ion-datetime instance associated with the datetime button. |
| 属性 | datetime |
| 类型 | string | undefined |
| 默认值 | undefined |
disabled
| 说明 | If true, the user cannot interact with the button. |
| 属性 | disabled |
| 类型 | boolean |
| 默认值 | false |
mode
| 说明 | The mode determines which platform styles to use. 这是一个虚拟属性,在初始化时设置一次,之后更改其值不会更新组件。 |
| 属性 | mode |
| 类型 | "ios" | "md" |
| 默认值 | undefined |
事件
该组件没有可用的事件。
方法
该组件没有可用的公共方法。
CSS Shadow Parts
| Name | 说明 |
|---|---|
native | The native HTML button that wraps the slotted text. |
CSS 自定义属性
该组件没有可用的 CSS 自定义属性。
插槽
| Name | 说明 |
|---|---|
date-target | Content displayed inside of the date button. |
time-target | Content displayed inside of the time button. |