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. |