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 Modals と Inline Popovers は keepContentsMounted プロパティを true に設定して使用しなければなりません。

プロパティ

color

Description	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.
Attribute	color
Type	"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined
Default	'primary'

datetime

Description	The ID of the ion-datetime instance associated with the datetime button.
Attribute	datetime
Type	string ｜ undefined
Default	undefined

disabled

Description	trueの場合、ユーザはボタンと対話することができません。
Attribute	disabled
Type	boolean
Default	false

mode

Description	modeは、どのプラットフォームのスタイルを使用するかを決定します。
Attribute	mode
Type	"ios" ｜ "md"
Default	undefined

イベント

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

Name	Description
native	slotされたテキストをラップするネイティブHTMLボタンです。

CSS Custom Properties

No CSS custom properties available for this component.

Slots

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