ion-datetime-button
日期时间按钮(Datetime Button)与日期时间组件关联,用于显示格式化的日期和时间。它还提供按钮,用于在模态框、弹出框等中显示日期时间。
概述
当空间受限时,应使用日期时间按钮。此组件显示显示当前日期和时间值的按钮。当按钮被点击时,日期或时间选择器会在覆盖层中打开。
在使用 Angular、React 或 Vue 等 JavaScript 框架的 Datetime Button 时,请务必使用 ion-modal 的 keepContentsMounted 属性 或 ion-popover 的 keepContentsMounted 属性。这允许关联的日期时间实例即使在覆盖层尚未显示时也能挂载。
基本用法
本地化
ion-datetime-button 上的本地化文本由关联的 ion-datetime 实例上的 locale 属性决定。更多详细信息请参阅日期时间本地化。
格式选项
你可以通过为关联的 Datetime 实例提供 formatOptions 来自定义 Datetime Button 中日期和时间的格式。更多详细信息请参阅日期时间格式选项。
与模态框和弹出框一起使用
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 阴影部分
| 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. |