ion-datetime-button
Datetimeボタンは、Datetime コンポーネントとリンクし、フォーマットされた日付と時刻を表示します。また、モーダルやポップオーバーなどで日時を表示するためのボタンも用意されています。
概要
Datetimeボタンは、スペースに制約がある場合に使用する必要があります。このコンポーネントは、現在の日付と時刻の値を表示するボタンを表示します。ボタンがタップされると、日付や時刻のピッカーがオーバーレイで表示されます。
Angular、React、Vue などの JavaScript フレームワークで Datetime Button を使用する場合は、ion-modal の keepContentsMounted プロパティまたは ion-popover の keepContentsMounted プロパティを使用してください。これにより、オーバーレイがまだ表示されていない場合でも、関連付けられた datetime インスタンスがマウントされます。
基本的な使い方
ローカライゼーション
ion-datetime-button上のローカライズされたテキストは、関連するion-datetimeインスタンスのlocaleプロパティによって決まります。詳細は日時ローカライゼーションを参照してください。
Format Options
Datetime ボタンの日時の形式は、関連する Datetime インスタンスで formatOptions を指定することでカスタマイズできます。詳細は Datetime フォーマットオプション を参照してください。
モーダルやポップオーバーと使う
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は、どのプラットフォームのスタイルを使用するかを決定します。 This is a virtual property that is set once during initialization and will not update if you change its value after the initial render. |
| 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 | 時刻ボタンの内側に表示される内容。 |