ion-datetime
Datetimeは、ユーザーが日付と時刻を簡単に選択できるように、カレンダーインターフェースとタイムホイールを提供します。Datetimeは、datetime-localのネイティブinput要素と似ていますが、Ionic FrameworkのDatetimeコンポーネントを使用すると、日付と時刻を希望の形式で簡単に表示し、datetime値を管理できます。
概要
従来、JavaScript内、あるいはHTML入力内であっても、datetime値を処理することは常に困難でした。具体的には、JavaScriptのDateオブジェクトは、datetime文字列を正しく解析したり、datetime値をフォーマットしたりすることが非常に難しいことで知られています。さらに悪いことに、異なるブラウザやJavaScriptのバージョンでは、特にロケールごとにさまざまなdatetime文字列が異なる方法で解析されます。
幸いなことに、Ionic Frameworkのdatetime入力は、開発者が一般的な落とし穴を回避できるように設計されており、開発者はdatetime値を簡単に操作し、優れたユーザーエクスペリエンスのためにユーザーにシンプルなdatetimeピッカーを提供できます。
ISO 8601 Datetime形式: YYYY-MM-DDTHH:mmZ
Ionic Frameworkでは、値にISO 8601 datetime形式を使用します。値は、JavaScriptのDateオブジェクトを使用するのではなく、単なる文字列です。ISO datetime形式を使用すると、JSONオブジェクトやデータベース内でシリアル化および解析が簡単になります。
以下は、ion-datetimeで使用できるISO 8601形式の例です。
| 説明 | 形式 | Datetime値の例 |
|---|---|---|
| 年 | YYYY | 1994 |
| 年と月 | YYYY-MM | 1994-12 |
| 完全な日付 | YYYY-MM-DD | 1994-12-15 |
| 日付と時刻 | YYYY-MM-DDTHH:mm | 1994-12-15T13:47 |
| UTCタイムゾーン | YYYY-MM-DDTHH:mm:ssZ | 1994-12-15T13:47:20Z |
| タイムゾーンオフセット | YYYY-MM-DDTHH:mm:ssTZD | 1994-12-15T13:47:20+05:00 |
| 時と分 | HH:mm | 13:47 |
年は常に4桁、ミリ秒（追加した場合）は常に3桁、その他はすべて常に2桁であることに注意してください。したがって、1月を表す数は常に01のように先頭に0が付きます。さらに、時間は常に24時間形式であり、したがって、00は12時間制で午前12時、13は午後1時、23は午後11時を意味します。
ISO 8601 datetime形式を使用して秒、ミリ秒、タイムゾーンを指定できますが、ion-datetimeは秒、ミリ秒、タイムゾーンの選択のためのインターフェースを提供していません。提供された秒、ミリ秒、タイムゾーンの値はすべて無視されます。
基本使用法
Datetimeボタンとの使用法
モーダルやポップオーバーなどのオーバーレイでdatetimeを表示する必要がある場合は、ion-datetime-buttonを使用することをお勧めします。ion-datetime-buttonは、スペースが限られている場合に使用する必要があります。このコンポーネントは、現在の日付と時刻の値を示すボタンを表示します。ボタンをタップすると、オーバーレイに日付または時刻ピッカーが開きます。
非同期での値の設定
datetimeが作成された後でそのvalueがプログラムで更新された場合、datetimeは自動的に新しい日付にジャンプします。ただし、ユーザーがdatetimeを操作できるときにこのようにvalueを更新することは避けることをお勧めします。これは、現在日付を選択しようとしているユーザーにとって混乱を招く可能性があるためです。たとえば、datetimeのvalueが非同期プロセスでロードされる場合は、値の更新が完了するまで、CSSでdatetimeを非表示にすることをお勧めします。
日付の制約
最大日付と最小日付
最小および最大datetime値をカスタマイズするために、アプリのユースケースにより理にかなう可能性のあるminおよびmaxコンポーネントプロパティを提供できます。上記の表にリストされているのと同じIS0 8601形式に従って、各コンポーネントはユーザーが選択できる日付を制限できます。
次の例では、日付の選択を2022年3月から2022年5月までに制限します。
特定の値の選択
minおよびmaxプロパティを使用すると、日付の選択を特定の範囲に制限できますが、monthValues、dayValues、yearValues、hourValues、およびminuteValuesプロパティを使用すると、ユーザーが選択できる特定の日付と時刻を選択できます。
次の例では、分を15分間隔で選択できるようにします。また、日を5日間隔で選択できるようにします。
高度な日付の制約
isDateEnabledプロパティを使用すると、開発者はISO 8601日付文字列を使用して、特定の日付、日付範囲、週末、または任意のカスタムルールを無効にするようにion-datetimeをカスタマイズできます。isDateEnabledプロパティは、日付が有効かどうかを示すブール値を返す関数を受け入れます。この関数は、前の月、現在の月、および次の月の、レンダリングされた各カレンダーの日に対して呼び出されます。カスタム実装は、ジャンプを避けるためにパフォーマンスが最適化されている必要があります。
次の例は、週末の日付をすべて無効にする方法を示しています。より高度な日付操作については、date-fnsなどの日付ユーティリティを使用することをお勧めします。
ローカライゼーション
Ionic Frameworkは、Intl.DatetimeFormat Web APIを使用しており、これにより、ユーザーのデバイスで設定された言語と地域に基づいて、月と曜日の名前を自動的にローカライズできます。
カスタムロケール
特定のロケールが必要な場合は、localeプロパティを使用して設定できます。ロケールは、表示される言語と日付および時刻の両方の形式を制御します。
次の例は、ロケールをスペイン語（スペイン）に設定する方法を示しています。
時刻ラベルは自動的にローカライズされません。詳細については、時刻ラベルを参照してください。
時間サイクル
ion-datetimeは、デフォルトでlocaleプロパティで指定された時間サイクルを使用します。たとえば、localeがen-USに設定されている場合、ion-datetimeは12時間サイクルを使用します。
主な時間サイクルタイプは4つあります。
| 時間サイクルタイプ | 説明 |
|---|---|
'h12' | 1〜12を使用する時間システム。パターン内の「h」に対応します。午前12時に始まる12時間制の時計。 |
'h23' | 0〜23を使用する時間システム。パターン内の「H」に対応します。午前0時に始まる24時間制の時計。 |
'h11' | 0〜11を使用する時間システム。パターン内の「K」に対応します。午前0時に始まる12時間制の時計。 |
'h24' | 1〜24を使用する時間システム。パターン内の「k」に対応します。24時に始まる24時間制の時計。 |
どの時間サイクルを使用するかをより細かく制御する必要がある場合があります。ここで、hourCycleプロパティが役立ちます。
次の例では、hourCycleプロパティを使用して、ロケールがen-GBであっても、ion-datetimeに12時間サイクルを強制的に使用させることができます。これは、デフォルトで24時間サイクルを使用します。
週の最初の曜日
ion-datetimeの場合、週の最初の曜日のデフォルトは日曜日です。2022年の時点で、Ionicがデバイスのロケールに基づいて週の最初の曜日を自動的に判断できるブラウザAPIはありませんが、これに関する作業が進行中です（参照：TC39 GitHub）。
時刻ラベル
時刻ラベルは自動的にローカライズされません。幸いなことに、Ionicではtime-labelスロットを使用してカスタムローカライズを簡単に提供できます。
ロケール拡張タグ
ion-datetimeは、Intl.Locale APIの一部としてロケール拡張タグもサポートしています。これらのタグを使用すると、ロケールに関する情報をロケール文字列自体にエンコードできます。開発者は、アプリでIntl.Locale APIを使用している場合、拡張タグアプローチを使用することを好むかもしれません。
たとえば、en-GBロケールで12時間サイクルを使用したい場合、localeプロパティとhourCycleプロパティの両方を使用する代わりに、拡張タグを指定できます。
アプリで使用する前に、Intl.Localeのブラウザ互換性チャートを確認してください。
プレゼンテーション
デフォルトでは、ion-datetimeを使用すると、ユーザーは日付と時刻の両方を選択できます。さらに、ユーザーは特定の月、年、時間、分を選択できます。
ユースケースによっては、日付の選択のみ、または時刻の選択のみが必要な場合があります。presentationプロパティを使用すると、どのピッカーを表示するかと、表示する順序を指定できます。たとえば、date-timeを設定すると、カレンダーピッカーが時刻ピッカーの前に表示されます。time-dateを設定すると、カレンダーピッカーが時刻ピッカーの後に表示されます。
月と年の選択
月と年の選択は、month-year、year-month、month、またはyearをpresentationプロパティに渡すことで利用できます。
この例は、month-year構成のdatetimeを示しています。
時刻の選択
時刻の選択は、date-time、time-date、またはtimeをpresentationプロパティに渡すことで利用できます。
この例は、time構成のdatetimeを示しています。
日付の選択
日付の選択は、date-time、time-date、またはdateをpresentationプロパティに渡すことで利用できます。
この例は、date構成のdatetimeを示しています。
ホイールスタイルのピッカー
デフォルトでは、Ionicはpresentationを使用するときにグリッドスタイルのレイアウトを表示することを優先します。ただし、preferWheelプロパティを使用してホイールスタイルを表示することができます。preferWheelがtrueの場合、Ionicは可能な限りホイールスタイルのレイアウトを表示することを優先します。
特定のpresentationオプションには、開発者がpreferWheelプロパティで選択できるグリッドスタイルとホイールスタイルの両方があります。他のpresentationの値にはホイールスタイルのみがあり、グリッドスタイルが表示されることはありません。以下の表は、どのpresentationの値にグリッドスタイルまたはホイールスタイルがあるかを示しています。
presentation | グリッドスタイルはありますか？ | ホイールスタイルはありますか？ |
|---|---|---|
date | はい | はい |
date-time | はい | はい |
month | いいえ | はい |
month-year | いいえ | はい |
time | いいえ | はい |
time-date | はい | はい |
year | いいえ | はい |
次の例は、presentation="date-time"を使用したホイールピッカーを示しています。
複数日付の選択
multipleプロパティがtrueに設定されている場合、カレンダーピッカーから複数の日付を選択できます。選択した日付をクリックすると、選択が解除されます。
このプロパティは、presentation="date"およびpreferWheel="false"を使用している場合にのみサポートされます。
タイトル
デフォルトでは、ion-datetimeはコンポーネントに関連付けられたヘッダーまたはタイトルを表示しません。開発者はshowDefaultTitleプロパティを使用してデフォルトのタイトル/ヘッダー構成を表示できます。また、titleスロットを使用してヘッダーにレンダリングされる内容をカスタマイズすることもできます。
デフォルトタイトルの表示
タイトルのカスタマイズ
形式オプション
formatOptionsを指定することにより、Datetimeコンポーネントのヘッダーテキストの日付と、時刻ボタンの時刻の形式をカスタマイズできます。formatOptionsプロパティのdateとtimeは、それぞれIntl.DateTimeFormatOptionsオブジェクトである必要があります。formatOptionsが指定されていない場合は、日付と時刻にデフォルトの形式が使用されます。
Datetimeはタイムゾーンを操作または設定しません。timeZoneまたはtimeZoneNameが指定されている場合、それらは無視され、タイムゾーンはUTCに設定されます。これにより、表示される値が、ユーザーの現在のタイムゾーンに変換されるのではなく、選択された値と一致することが保証されます。
提供するオプションには注意してください。選択したプレゼンテーションと一致しない場合があります。たとえば、monthのプレゼンテーションにminute: 'numeric'を提供すると、予期しない動作につながり、時刻のみが予期される場所に月が表示される可能性があります。
ボタン
デフォルトでは、新しい日付が選択されるたびに、新しいdatetime値でionChangeが発行されます。ionChangeを発行する前にユーザーの確認を求めるには、showDefaultButtonsプロパティをtrueに設定するか、buttonsスロットを使用してカスタム確認ボタンを渡します。カスタムボタンを渡す場合、ionChangeが発行されるためには、確認ボタンがion-datetimeでconfirmメソッドを呼び出す必要があります。
確認ボタンの表示
デフォルトの[完了]ボタンと[キャンセル]ボタンは、confirmメソッドとcancelメソッドをそれぞれ呼び出すようにすでに事前構成されています。
ボタンテキストのカスタマイズ
簡単なユースケースでは、開発者はdoneTextプロパティとcancelTextプロパティを使用して、確認とキャンセルの値にカスタムボタンテキストを提供できます。ボタンテキストのみを変更する必要があり、カスタム動作が必要ない場合は、これを行うことをお勧めします。
ボタン要素のカスタマイズ
開発者は、高度なカスタム動作のために独自のボタンを提供できます。
ion-datetimeには、開発者がカスタムボタンをクリックしたときに呼び出すことができるconfirm、cancel、およびresetメソッドがあります。resetメソッドを使用すると、開発者はdatetimeをリセットする日付を指定することもできます。
特定の日付の強調表示
highlightedDatesプロパティを使用すると、開発者は特定の日付をカスタムテキストまたは背景色でスタイル設定できます。このプロパティは、日付とその色の配列、またはISO文字列を受け取り、使用する色を返すコールバックとして定義できます。
色を指定する場合、有効なCSSカラー形式を使用できます。これには、16進コード、rgba、カラー変数などが含まれます。
一貫したユーザーエクスペリエンスを維持するために、選択された日付のスタイルは常にカスタムハイライトを上書きします。
このプロパティは、preferWheel="false"を使用し、"date"、"date-time"、または"time-date"のいずれかのpresentationを使用している場合にのみサポートされます。
配列の使用
配列は、期日などの固定された日付にハイライトを適用する場合に適しています。
コールバックの使用
コールバックは、誕生日や定期的な会議など、強調表示された日付が繰り返される場合に適しています。
スタイリング
グローバルテーマ
Ionic の強力なテーマシステムを使用すると、アプリ全体を特定のテーマに合わせて簡単に変更できます。この例では、カラークリエーターとステップカラージェネレーターを使用して、ion-datetimeで使用できるローズカラーパレットを作成しました。
このアプローチの利点は、ion-datetimeだけでなく、すべてのコンポーネントがこのテーマを自動的に利用できることです。
カレンダーの日付
グリッドスタイルのion-datetimeのカレンダーの日付は、CSSシャドウパーツを使用してスタイルを設定できます。
以下の例では、2日前の日付を選択します。ただし、その日が前の月にある場合は、2日後の日付を選択します。これは、すべての日、現在の日、および選択された日にカスタムスタイルを適用する方法を示すデモ目的のために行われます。
ホイールピッカー
ion-datetimeで使用されるホイールは、シャドウパーツとCSS変数の組み合わせでスタイルを設定できます。これは、ホイールスタイルの日付時刻の列と、グリッドスタイルの日付時刻の月/年ピッカーの両方に適用されます。
タイムゾーン
Ionic のion-datetimeは、日付時刻コントロール内でタイムゾーンを操作したり設定したりしないというdatetime-localの動作に従います。つまり、「07:00」という時刻値は、異なるタイムゾーンに応じて調整されません。
日付時刻値を目的のタイムゾーンに変換するには、date-fns-tzなどのライブラリを使用することをお勧めします。
以下は、ISO-8601文字列をユーザーのデバイスに設定されたタイムゾーンで表示するようにフォーマットする例です。
import { format, utcToZonedTime } from 'date-fns-tz';
// Get the time zone set on the user's device
const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
// Create a date object from a UTC date string
const date = new Date('2014-10-25T10:46:20Z');
// Use date-fns-tz to convert from UTC to a zoned time
const zonedTime = utcToZonedTime(date, userTimeZone);
// Create a formatted string from the zoned time
format(zonedTime, 'yyyy-MM-dd HH:mm:ssXXX', { timeZone: userTimeZone });
日付値の解析
ionChangeイベントは、日付値をISO-8601文字列としてイベントペイロードで発行します。アプリケーションのニーズに基づいてフォーマットするのは開発者の責任です。日付値をフォーマットするには、date-fnsを使用することをお勧めします。
以下は、ISO-8601文字列を月、日、年を表示するようにフォーマットする例です。
import { format, parseISO } from 'date-fns';
/**
* This is provided in the event
* payload from the `ionChange` event.
*
* The value is an ISO-8601 date string.
*/
const dateFromIonDatetime = '2021-06-04T14:23:00-04:00';
const formattedString = format(parseISO(dateFromIonDatetime), 'MMM d, yyyy');
console.log(formattedString); // Jun 4, 2021
有効なフォーマットトークンの一覧については、https://date-fns.org/docs/formatを参照してください。
高度な日付時刻の検証と操作
日付時刻ピッカーは、正確なフォーマットを選択するシンプルさを提供し、標準化されたISO 8601日付時刻フォーマットを使用して日付時刻値を文字列として保持します。ただし、ion-datetimeは、日付時刻値を検証および操作する際のすべての状況を解決しようとはしないことに注意することが重要です。特定のフォーマットから日付時刻値を解析したり、操作したり（日付に5日を追加したり、30分を減算したりするなど）、または特定のロケールにデータをフォーマットする必要がある場合は、JavaScriptで日付を操作するためにdate-fnsを使用することを強くお勧めします。
アクセシビリティ
キーボード操作
ion-datetimeは、コンポーネント内のフォーカス可能な要素間を移動するための完全なキーボードサポートを備えています。次の表に、各キーの動作の詳細を示します。
| キー | 説明 |
|---|---|
| Tab | フォーカスを次のフォーカス可能な要素に移動します。 |
| Shift + Tab | フォーカスを前のフォーカス可能な要素に移動します。 |
| Space または Enter | フォーカス可能な要素をクリックします。 |
日付グリッド
| キー | 説明 |
|---|---|
| ArrowUp | フォーカスを前の週の同じ曜日に移動します。 |
| ArrowDown | フォーカスを次の週の同じ曜日に移動します。 |
| ArrowRight | フォーカスを次の日に移動します。 |
| ArrowLeft | フォーカスを前の日に移動します。 |
| Home | フォーカスを現在の週の最初の日に移動します。 |
| End | フォーカスを現在の週の最後の日に移動します。 |
| PageUp | 日付のグリッドを前の月に変更します。 |
| PageDown | 日付のグリッドを次の月に変更します。 |
| Shift + PageUp | 日付のグリッドを前の年に変更します。 |
| Shift + PageDown | 日付のグリッドを次の年に変更します。 |
時間、月、年ホイール
日付時刻のホイールピッカーは、内部的にピッカーを使用します。ホイールピッカーのアクセシビリティ機能の詳細については、ピッカーのアクセシビリティを参照してください。
インターフェース
DatetimeChangeEventDetail
interface DatetimeChangeEventDetail {
value?: string | null;
}
DatetimeCustomEvent
必須ではありませんが、このインターフェースは、このコンポーネントから発行されるIonicイベントでより強力な型付けを行うために、CustomEventインターフェースの代わりに使用できます。
interface DatetimeCustomEvent extends CustomEvent {
detail: DatetimeChangeEventDetail;
target: HTMLIonDatetimeElement;
}
プロパティ
cancelText
| 説明 | ピッカーのキャンセルボタンに表示するテキスト。 |
| 属性 | cancel-text |
| 型 | string |
| デフォルト | 'キャンセル' |
clearText
| 説明 | ピッカーの「クリア」ボタンに表示するテキスト。 |
| 属性 | clear-text |
| 型 | string |
| デフォルト | 'クリア' |
color
| 説明 | アプリケーションのカラーパレットで使用する色。デフォルトのオプションは、"primary"、"secondary"、"tertiary"、"success"、"warning"、"danger"、"light"、"medium"、"dark"です。色の詳細については、テーマ設定を参照してください。 |
| 属性 | color |
| 型 | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined |
| デフォルト | 'primary' |
dayValues
| 説明 | 選択可能な日付のリストを作成するために使用される値。デフォルトでは、特定の月のすべての日が表示されます。ただし、月の表示する日を正確に制御するために、dayValues入力には、数値、数値の配列、またはカンマ区切りの数値の文字列を使用できます。配列の日付が選択した月に無効な数値（2月の31など）を持つ場合でも、選択した月に有効でない日は正しく表示されないことに注意してください。 |
| 属性 | day-values |
| 型 | number ｜ number[] ｜ string ｜ undefined |
| デフォルト | undefined |
disabled
| 説明 | trueの場合、ユーザーは日付時刻を操作できません。 |
| 属性 | disabled |
| 型 | boolean |
| デフォルト | false |
doneText
| 説明 | ピッカーの「完了」ボタンに表示するテキスト。 |
| 属性 | done-text |
| 型 | string |
| デフォルト | '完了' |
firstDayOfWeek
| 説明 | ion-datetimeに使用する週の最初の曜日。デフォルト値は0で、日曜日を表します。 |
| 属性 | first-day-of-week |
| 型 | number |
| デフォルト | 0 |
formatOptions
| 説明 | 日付と時刻のフォーマットオプション。「date」または「time」オブジェクトを含める必要があります。それぞれがIntl.DateTimeFormatOptions型です。 |
| 属性 | undefined |
| 型 | undefined ｜ { date: DateTimeFormatOptions; time?: DateTimeFormatOptions ｜ undefined; } ｜ { date?: DateTimeFormatOptions ｜ undefined; time: DateTimeFormatOptions; } |
| デフォルト | undefined |
highlightedDates
| 説明 | 特定の日付にカスタムテキストと背景色を適用するために使用されます。 ISO文字列と色を含むオブジェクトの配列、またはISO文字列を受け取って色を返すコールバックのいずれかを使用できます。 date、date-time、およびtime-dateのプレゼンテーションにのみ適用され、preferWheel="false"を使用します。 |
| 属性 | undefined |
| 型 | ((dateIsoString: string) => DatetimeHighlightStyle ｜ undefined) ｜ DatetimeHighlight[] ｜ undefined |
| デフォルト | undefined |
hourCycle
| 説明 | ion-datetimeの時間サイクル。値が設定されていない場合、これは現在のロケールによって指定されます。 |
| 属性 | hour-cycle |
| 型 | "h11" ｜ "h12" ｜ "h23" ｜ "h24" ｜ undefined |
| デフォルト | undefined |
hourValues
| 説明 | 選択可能な時間のリストを作成するために使用される値。デフォルトでは、時間の値は24時間の場合は0から23まで、12時間の場合は1から12までの範囲です。ただし、表示する時間を正確に制御するために、hourValues入力には、数値、数値の配列、またはカンマ区切りの数値の文字列を使用できます。 |
| 属性 | hour-values |
| 型 | number ｜ number[] ｜ string ｜ undefined |
| デフォルト | undefined |
isDateEnabled
| 説明 | 個々の日付（暦日）が有効か無効かを返します。trueの場合、その日は有効/インタラクティブになります。falseの場合、その日は無効/非インタラクティブになります。この関数は、指定された日のISO 8601形式の日付文字列を受け取ります。デフォルトでは、すべての日が有効になっています。開発者はこの関数を使用して、特定の日を無効にするカスタムロジックを記述できます。 この関数は、前月、当月、翌月に対して、レンダリングされる各暦日に呼び出されます。カスタム実装では、ちらつきを避けるためにパフォーマンスが最適化されている必要があります。 |
| 属性 | undefined |
| 型 | ((dateIsoString: string) => boolean) ｜ undefined |
| デフォルト | undefined |
locale
| 説明 | ion-datetimeで使用するロケール。これは、月と曜日の名前の書式設定に影響します。"default"値は、デバイスで設定されたデフォルトのロケールを指します。 |
| 属性 | locale |
| 型 | string |
| デフォルト | 'default' |
max
| 説明 | 許可される最大日時。値は、ISO 8601日時形式標準に従う日付文字列である必要があります。例：1996-12-19。形式は、正確な日時に特定する必要はありません。たとえば、最大値は年のみ（例：1994）でも構いません。デフォルトでは、今年の年末になります。 |
| 属性 | max |
| 型 | string ｜ undefined |
| デフォルト | undefined |
min
| 説明 | 許可される最小日時。値は、ISO 8601日時形式標準に従う日付文字列である必要があります。例：1996-12-19。形式は、正確な日時に特定する必要はありません。たとえば、最小値は年のみ（例：1994）でも構いません。デフォルトでは、今日から100年前の年初になります。 |
| 属性 | min |
| 型 | string ｜ undefined |
| デフォルト | undefined |
minuteValues
| 説明 | 選択可能な分のリストを作成するために使用される値。デフォルトでは、分は0から59の範囲です。ただし、表示する分を正確に制御するために、minuteValues入力は数値、数値の配列、またはコンマ区切りの数値の文字列を受け入れることができます。たとえば、分の選択が15分ごとだけにする必要がある場合、この入力値はminuteValues="0,15,30,45"になります。 |
| 属性 | minute-values |
| 型 | number ｜ number[] ｜ string ｜ undefined |
| デフォルト | undefined |
mode
| 説明 | モードは、使用するプラットフォームのスタイルを決定します。 |
| 属性 | mode |
| 型 | "ios" ｜ "md" |
| デフォルト | undefined |
monthValues
| 説明 | 選択可能な月のリストを作成するために使用される値。デフォルトでは、月の値は1から12の範囲です。ただし、表示する月を正確に制御するために、monthValues入力は数値、数値の配列、またはコンマ区切りの数値の文字列を受け入れることができます。たとえば、夏の月だけを表示する必要がある場合、この入力値はmonthValues="6,7,8"になります。月の番号はゼロから始まるインデックスではないことに注意してください。つまり、1月は1、12月は12です。 |
| 属性 | month-values |
| 型 | number ｜ number[] ｜ string ｜ undefined |
| デフォルト | undefined |
multiple
| 説明 | trueの場合、複数の日付を一度に選択できます。presentation="date"およびpreferWheel="false"の場合にのみ適用されます。 |
| 属性 | multiple |
| 型 | boolean |
| デフォルト | false |
name
| 説明 | フォームデータとともに送信されるコントロールの名前。 |
| 属性 | name |
| 型 | string |
| デフォルト | this.inputId |
preferWheel
| 説明 | trueの場合、可能な場合はカレンダーグリッドの代わりにホイールピッカーがレンダリングされます。falseの場合、可能な場合はホイールピッカーの代わりにカレンダーグリッドがレンダリングされます。presentationが次の値のいずれかの場合、グリッドの代わりにホイールピッカーをレンダリングできます。"date"、"date-time"、または"time-date"。presentationが次の値のいずれかの場合、preferWheelの値に関係なく、常にホイールピッカーがレンダリングされます。"time"、"month"、"month-year"、または"year"。 |
| 属性 | prefer-wheel |
| 型 | boolean |
| デフォルト | false |
presentation
| 説明 | 選択したい値。"date"は、月、日、年を選択するカレンダーピッカーを表示します。"time"は、時間、分、および（オプションで）AM/PMを選択するタイムピッカーを表示します。"date-time"は、最初に日付ピッカーを表示し、次にタイムピッカーを表示します。"time-date"は、最初にタイムピッカーを表示し、次に日付ピッカーを表示します。 |
| 属性 | presentation |
| 型 | "date" ｜ "date-time" ｜ "month" ｜ "month-year" ｜ "time" ｜ "time-date" ｜ "year" |
| デフォルト | 'date-time' |
readonly
| 説明 | trueの場合、日付時刻は正常に表示されますが、選択した日付を変更することはできません。 |
| 属性 | readonly |
| 型 | boolean |
| デフォルト | false |
showClearButton
| 説明 | trueの場合、ion-datetimeコンポーネントの下部にデフォルトの「キャンセル」および「OK」ボタンとともに「クリア」ボタンがレンダリングされます。開発者は、これらのボタンをカスタマイズしたい場合は、buttonスロットを使用することもできます。カスタムボタンがbuttonスロットに設定されている場合、デフォルトのボタンはレンダリングされません。 |
| 属性 | show-clear-button |
| 型 | boolean |
| デフォルト | false |
showDefaultButtons
| 説明 | trueの場合、デフォルトの「キャンセル」および「OK」ボタンがion-datetimeコンポーネントの下部にレンダリングされます。開発者は、これらのボタンをカスタマイズしたい場合は、buttonスロットを使用することもできます。カスタムボタンがbuttonスロットに設定されている場合、デフォルトのボタンはレンダリングされません。 |
| 属性 | show-default-buttons |
| 型 | boolean |
| デフォルト | false |
showDefaultTimeLabel
| 説明 | trueの場合、ion-datetimeコンポーネントのタイムセレクターにデフォルトの「時間」ラベルがレンダリングされます。開発者は、このラベルをカスタマイズしたい場合は、time-labelスロットを使用することもできます。カスタムラベルがtime-labelスロットに設定されている場合、デフォルトのラベルはレンダリングされません。 |
| 属性 | show-default-time-label |
| 型 | boolean |
| デフォルト | true |
showDefaultTitle
| 説明 | trueの場合、カレンダーピッカーの上にヘッダーが表示されます。これには、スロット付きのタイトルと選択された日付の両方が含まれます。 |
| 属性 | show-default-title |
| 型 | boolean |
| デフォルト | false |
size
| 説明 | coverの場合、ion-datetimeはコンテナの幅全体を覆うように拡大します。fixedの場合、ion-datetimeの幅は固定されます。 |
| 属性 | size |
| 型 | "cover" ｜ "fixed" |
| デフォルト | 'fixed' |
titleSelectedDatesFormatter
| 説明 | 選択された日付の数を表示するヘッダーテキストの書式設定に使用されるコールバック。0個または2個以上選択されている場合のみ使用されます（つまり、1個の場合は未使用）。デフォルトでは、ヘッダーテキストは「numberOfDates days」に設定されます。 コールバック内から thisにアクセスする必要がある場合は、https://ionic.dokyumento.jp/docs/troubleshooting/runtime#accessing-thisを参照してください。 |
| 属性 | undefined |
| 型 | ((selectedDates: string[]) => string) ｜ undefined |
| デフォルト | undefined |
value
| 説明 | 有効なISO 8601日時文字列としての日付時刻の値。これは、multiple="true"の場合のみ文字列の配列である必要があります。 |
| 属性 | value |
| 型 | null ｜ string ｜ string[] ｜ undefined |
| デフォルト | undefined |
yearValues
| 説明 | 選択可能な年のリストを作成するために使用される値。デフォルトでは、年の値はminとmaxの日付時刻入力の範囲になります。ただし、表示する年を正確に制御するために、yearValues入力は数値、数値の配列、またはコンマ区切りの数値の文字列を受け入れることができます。たとえば、今後の閏年と最近の閏年を表示するには、この入力の値はyearValues="2008,2012,2016,2020,2024"になります。 |
| 属性 | year-values |
| 型 | number ｜ number[] ｜ string ｜ undefined |
| デフォルト | undefined |
Events
| 名前 | 説明 | バブル |
|---|---|---|
ionBlur | 日付時刻がフォーカスを失ったときに発行されます。 | true |
ionCancel | 日付時刻の選択がキャンセルされたときに発行されます。 | true |
ionChange | 値（選択された日付）が変更されたときに発行されます。valueプロパティをプログラムで設定した場合、このイベントは発行されません。 | true |
ionFocus | 日付時刻がフォーカスされたときに発行されます。 | true |
Methods
cancel
| 説明 | ionCancelイベントを発行し、必要に応じて、日付時刻が表示されたポップオーバーまたはモーダルを閉じます。 |
| 署名 | cancel(closeOverlay?: boolean) => Promise<void> |
confirm
| 説明 | 選択した日付時刻の値を確定し、valueプロパティを更新し、必要に応じて、日付時刻が表示されたポップオーバーまたはモーダルを閉じます。 |
| 署名 | confirm(closeOverlay?: boolean) => Promise<void> |
reset
| 説明 | 日付時刻の内部状態をリセットしますが、値は更新しません。有効なISO-8601文字列を渡すと、コンポーネントの状態が指定された日付にリセットされます。値が提供されていない場合、内部状態は最小値、最大値、および今日日のクランプされた値にリセットされます。 |
| 署名 | reset(startDate?: string) => Promise<void> |
CSS Shadow Parts
| 名前 | 説明 |
|---|---|
calendar-day | 日付時刻カレンダー内の日を表示する個々のボタン。 |
calendar-day active | 現在選択されているカレンダーの日。 |
calendar-day disabled | 無効になっているカレンダーの日。 |
calendar-day today | 今日の日を含むカレンダーの日。 |
month-year-button | グリッドスタイルのレイアウトを使用している場合に、月/年ピッカーを開くボタン。 |
time-button | presentation="date-time"または"time-date"でグリッドスタイルのレイアウトを使用している場合に、タイムピッカーを開くボタン。 |
time-button active | ピッカーが開いているときのタイムピッカーボタン。 |
wheel-item | ホイールスタイルのレイアウトを使用する場合の個々の項目、またはグリッドスタイルのレイアウトを使用する場合の月/年ピッカー内の個々の項目。 |
wheel-item active | 現在選択されているwheel-item。 |
CSSカスタムプロパティ
- iOS
- MD
| 名前 | 説明 |
|---|---|
--background | datetimeコンポーネントのプライマリ背景。 |
--background-rgb | datetimeコンポーネントのプライマリ背景（RGB形式）。 |
--title-color | タイトルのテキストの色。 |
--wheel-fade-background-rgb | ホイールスタイルのレイアウトを使用する場合、またはグリッドスタイルのレイアウトの月/年ピッカーで、選択されていない項目を覆うグラデーションの色。 RGB形式（例：255, 255, 255）である必要があります。 |
--wheel-highlight-background | ホイールスタイルのレイアウトを使用する場合、またはグリッドスタイルのレイアウトの月/年ピッカーで、選択された項目の下のハイライトの背景。 |
--wheel-highlight-border-radius | ホイールスタイルのレイアウトを使用する場合、またはグリッドスタイルのレイアウトの月/年ピッカーで、選択された項目の下のハイライトのボーダー半径。 |
| 名前 | 説明 |
|---|---|
--background | datetimeコンポーネントのプライマリ背景。 |
--background-rgb | datetimeコンポーネントのプライマリ背景（RGB形式）。 |
--title-color | タイトルのテキストの色。 |
--wheel-fade-background-rgb | ホイールスタイルのレイアウトを使用する場合、またはグリッドスタイルのレイアウトの月/年ピッカーで、選択されていない項目を覆うグラデーションの色。 RGB形式（例：255, 255, 255）である必要があります。 |
--wheel-highlight-background | ホイールスタイルのレイアウトを使用する場合、またはグリッドスタイルのレイアウトの月/年ピッカーで、選択された項目の下のハイライトの背景。 |
--wheel-highlight-border-radius | ホイールスタイルのレイアウトを使用する場合、またはグリッドスタイルのレイアウトの月/年ピッカーで、選択された項目の下のハイライトのボーダー半径。 |
スロット
| 名前 | 説明 |
|---|---|
buttons | datetime内のボタン。 |
time-label | datetime内の時間セレクターのラベル。 |
title | datetimeのタイトル。 |