メインコンテンツまでスキップ
バージョン: v8

ion-datetime-button

shadow

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

概要

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

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

基本的な使い方

ローカライゼーション

ion-datetime-button のローカライズされたテキストは、関連する ion-datetime インスタンスの locale プロパティによって決まります。詳しくは、Datetime Localization を参照してください。

Format Options

DatetimeインスタンスにformatOptionsを指定することで、Datetime Buttonの日付と時刻の書式をカスタマイズすることができます。詳細はDatetime Format Optionsを参照してください。

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

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

プロパティ

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

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

イベント

No events available for this component.

メソッド

No public methods available for this component.

CSS Shadow Parts

NameDescription
nativeThe native HTML button that wraps the slotted text.

CSS カスタムプロパティ

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.