ion-datetime-button
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 Modals と Inline Popovers は keepContentsMounted プロパティを true に設定して使用しなければなりません。
プロパティ
color
| Description | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", と "dark" です．色に関する詳しい情報は theming を参照してください。 |
| Attribute | color |
| Type | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined |
| Default | 'primary' |
datetime
| Description | datetime ボタンに関連付けられた ion-datetime インスタンスの ID。 |
| 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.
メソッド
No public methods available for this component.
CSS Shadow Parts
| Name | Description |
|---|---|
native | slotされたテキストをラップするネイティブHTMLボタンです。 |
CSS カスタムプロパティ
No CSS custom properties available for this component.
Slots
| Name | Description |
|---|---|
date-target | 日付ボタンの内側に表示されるコンテンツです。 |
time-target | 時刻ボタンの内側に表示される内容。 |