Skip to main content
Version: v7

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 を参照してください。

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

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

プロパティ

color

Descriptionアプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", と "dark" です.色に関する詳しい情報は theming を参照してください。
Attributecolor
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined
Default'primary'

datetime

Descriptiondatetime ボタンに関連付けられた ion-datetime インスタンスの ID。
Attributedatetime
Typestring | undefined
Defaultundefined

disabled

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

mode

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

イベント

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時刻ボタンの内側に表示される内容。