跳到主要内容
版本:v8

ion-datetime-button

shadow

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说明
nativeThe native HTML button that wraps the slotted text.

CSS 自定义属性

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

插槽

Name说明
date-targetContent displayed inside of the date button.
time-targetContent displayed inside of the time button.