メインコンテンツまでスキップ
Version: v6

ion-datetime-button

shadow

Datetimeボタンは、Datetime コンポーネントとリンクし、フォーマットされた日付と時刻を表示します。また、モーダルやポップオーバーなどで日時を表示するためのボタンも用意されています。

概要

Datetimeボタンは、スペースに制約がある場合に使用する必要があります。このコンポーネントは、現在の日付と時刻の値を表示するボタンを表示します。ボタンがタップされると、日付や時刻のピッカーがオーバーレイで表示されます。

Angular、React、VueなどのJavaScriptフレームワークでDatetime Buttonを使用する場合は、 ion-modalのkeepContentsMountedプロパティ または ion-popover を使用していることを確認してください。これにより、オーバーレイがまだ表示されていない場合でも、リンクされたdatetimeインスタンスがマウントされるようになります。

基本的な使い方

ローカライゼーション

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.

モーダルやポップオーバーと使う

ion-datetime-button は、マウントされた ion-datetime インスタンスと関連付ける必要があります。そのため、Inline ModalsInline PopoverskeepContentsMounted プロパティを true に設定して使用しなければなりません。

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 & Record<never, never> | undefined
Default'primary'

datetime

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

disabled

DescriptionIf true, the user cannot interact with the button.
Attributedisabled
Typeboolean
Defaultfalse

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" | "md"
Defaultundefined

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

NameDescription
nativeThe native HTML button that wraps the slotted text.

CSS Custom Properties

No CSS custom properties available for this component.

Slots

NameDescription
date-targetContent displayed inside of the date button.
time-targetContent displayed inside of the time button.