Skip to main content
Version: v6

ion-datetime-button

shadow

Datetime Button links with a Datetime component to display the formatted date and time. It also provides buttons to present the datetime in a modal, popover, and more.

Overview

Datetime Button should be used when space is constrained. This component displays buttons which show the current date and time values. When the buttons are tapped, the date or time pickers open in the overlay.

When using Datetime Button with a JavaScript framework such as Angular, React, or Vue be sure to use the keepContentsMounted property on ion-modal or the keepContentsMounted property on ion-popover. This allows the linked datetime instance to be mounted even if the overlay has not been presented yet.

Basic Usage

Localization

The localized text on ion-datetime-button is determined by the locale property on the associated ion-datetime instance. See Datetime Localization for more details.

Usage with Modals and Popovers

ion-datetime-button must be associated with a mounted ion-datetime instance. As a result, Inline Modals and Inline Popovers with the keepContentsMounted property set to true must be used.

Properties

color

DescriptionThe 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.
Attributecolor
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined
Default'primary'

datetime

DescriptionThe ID of the ion-datetime instance associated with the datetime button.
Attributedatetime
Typestring | undefined
Defaultundefined

disabled

Descriptiontrueの場合、ユーザはボタンと対話することができません。
Attributedisabled
Typeboolean
Defaultfalse

mode

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。
Attributemode
Type"ios" | "md"
Defaultundefined

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

NameDescription
nativeslotされたテキストをラップするネイティブHTMLボタンです。

CSS Custom Properties

No CSS custom properties available for this component.

Slots

NameDescription
date-target日付ボタンの内側に表示されるコンテンツです。
time-target時刻ボタンの内側に表示される内容。