ion-datetime-button

shadow

Datetime Buttonは、フォーマットされた日時を表示するためにDatetimeコンポーネントと連携します。また、モーダル、ポップオーバーなどで日時を表示するためのボタンも提供します。

概要

Datetime Buttonは、スペースが限られている場合に使用する必要があります。このコンポーネントは、現在の日時値を表示するボタンを表示します。ボタンをタップすると、オーバーレイに日付または時刻ピッカーが開きます。

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

基本的な使用法

ローカライゼーション

ion-datetime-buttonのローカライズされたテキストは、関連付けられたion-datetimeインスタンスのlocaleプロパティによって決定されます。詳細については、Datetimeローカライゼーションを参照してください。

フォーマットオプション

関連付けられたDatetimeインスタンスにformatOptionsを提供することで、Datetime Buttonの日時のフォーマットをカスタマイズできます。詳細については、Datetimeフォーマットオプションを参照してください。

モーダルおよびポップオーバーでの使用

ion-datetime-buttonは、マウントされたion-datetimeインスタンスに関連付けられている必要があります。その結果、keepContentsMountedプロパティがtrueに設定されたインラインモーダルおよびインラインポップオーバーを使用する必要があります。

プロパティ

color

説明	アプリケーションのカラーパレットから使用する色。デフォルトのオプションは、"primary"、"secondary"、"tertiary"、"success"、"warning"、"danger"、"light"、"medium"、"dark"です。色の詳細については、テーマを参照してください。
属性	color
タイプ	"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined
デフォルト	'primary'

datetime

説明	datetimeボタンに関連付けられたion-datetimeインスタンスのID。
属性	datetime
タイプ	string ｜ undefined
デフォルト	undefined

disabled

説明	trueの場合、ユーザーはボタンを操作できません。
属性	disabled
タイプ	boolean
デフォルト	false

mode

説明	モードは、使用するプラットフォームスタイルを決定します。
属性	mode
タイプ	"ios" ｜ "md"
デフォルト	undefined

イベント

このコンポーネントで利用可能なイベントはありません。

メソッド

このコンポーネントで使用できるパブリックメソッドはありません。

CSSシャドウパーツ

名前	説明
native	スロット付きテキストをラップするネイティブHTMLボタン。

CSSカスタムプロパティ

このコンポーネントで使用できるCSSカスタムプロパティはありません。

スロット

名前	説明
date-target	日付ボタン内に表示されるコンテンツ。
time-target	時刻ボタン内に表示されるコンテンツ。