跳至主要内容
版本:v8

ion-datetime-button

阴影

日期时间按钮与 日期时间 组件链接,以显示格式化的日期和时间。它还提供按钮以在模态、弹出窗口等中显示日期时间。

概述

当空间有限时,应使用日期时间按钮。此组件显示按钮,显示当前日期和时间值。轻触按钮时,日期或时间选择器将在叠加层中打开。

在使用日期时间按钮与 Angular、React 或 Vue 等 JavaScript 框架时,请务必在 ion-modal 上使用 keepContentsMounted 属性ion-popover 上使用 keepContentsMounted 属性。这允许链接的日期时间实例即使叠加层尚未显示也能够被安装。

基本用法

本地化

ion-datetime-button 上的本地化文本由关联的 ion-datetime 实例上的 locale 属性确定。有关更多详细信息,请参阅 日期时间本地化

格式选项

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

与模态和弹出窗口一起使用

ion-datetime-button 必须与已安装的 ion-datetime 实例关联。因此,必须使用 内联模态内联弹出窗口,并将 keepContentsMounted 属性设置为 true

属性

颜色

描述要从应用程序调色板中使用的颜色。默认选项为:"primary""secondary""tertiary""success""warning""danger""light""medium""dark"。有关颜色的更多信息,请参阅 主题
属性color
类型"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined
默认'primary'

datetime

描述与日期时间按钮关联的 ion-datetime 实例的 ID。
属性datetime
类型string | undefined
默认undefined

禁用

描述如果为 true,则用户无法与按钮交互。
属性disabled
类型boolean
默认false

模式

描述模式决定要使用哪个平台样式。
属性mode
类型"ios" | "md"
默认undefined

事件

此组件没有可用的事件。

方法

此组件没有可用的公共方法。

CSS 阴影部分

名称描述
native包装已插槽文本的原生 HTML 按钮。

CSS 自定义属性

此组件没有可用的 CSS 自定义属性。

插槽

名称描述
date-target显示在日期按钮内的内容。
time-target显示在时间按钮内的内容。