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 | 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 ｜ 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 | If true, the user cannot interact with the button. |
| Attribute | disabled |
| Type | boolean |
| Default | false |
mode
| Description | The mode determines which platform styles to use. |
| 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 | The native HTML button that wraps the slotted text. |
CSS カスタムプロパティ
No CSS custom properties available for this component.
Slots
| Name | Description |
|---|---|
date-target | Content displayed inside of the date button. |
time-target | Content displayed inside of the time button. |