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 Format: YYYY-MM-DDTHH:mmZ
Ionic Frameworkでは、ISO 8601 datetime format を値として使用します。
この値は、JavaScriptの Date オブジェクトを使用するのではなく、単純に文字列として使用されます。
ISO datetimeフォーマットを使用することで、
JSONオブジェクトやデータベース内でのシリアライズやパースが容易になります。
以下は、 ion-datetime で使用できる ISO 8601 フォーマットの例です:
| Description | Format | Datetime Value Example |
|---|---|---|
| Year | YYYY | 1994 |
| Year and Month | YYYY-MM | 1994-12 |
| Complete Date | YYYY-MM-DD | 1994-12-15 |
| Date and Time | YYYY-MM-DDTHH:mm | 1994-12-15T13:47 |
| UTC Timezone | YYYY-MM-DDTHH:mm:ssZ | 1994-12-15T13:47:20Z |
| Timezone Offset | YYYY-MM-DDTHH:mm:ssTZD | 1994-12-15T13:47:20+05:00 |
| Hour and Minute | HH:mm | 13:47 |
年号は常に4桁、ミリ秒は（加算される場合は）常に3桁、その他は常に2桁であることに注意してください。
ミリ秒は3桁、その他は2桁である。
ですから、1月を表す数字には 1月を表す数字には常に先頭のゼロ、例えば01が付きます。
また、時刻は常に24時間表示で、
12時間表示の時計では「00」は「午前12時」、「13」は「午後1時」、「23」は「午後3時」を意味します。
秒、ミリ秒、タイムゾーンは ISO 8601 datetime フォーマットで指定できますが、 ion-datetime は秒、ミリ秒、タイムゾーンを選択するためのインターフェイスを提供しません。秒、ミリ秒、タイムゾーンの値を指定しても無視されます。
基本的な使い方
日付ボタンと使う
モーダルやポップオーバーなどのオーバーレイで日付時刻を表示する必要がある場合は、 ion-datetime-button を使用することをお勧めします。スペースに制約がある場合は、 ion-datetime-button を使用する必要があります。このコンポーネントは、現在の日付と時刻の値を表示するボタンを表示します。ボタンがタップされると、日付と時刻のピッカーがオーバーレイで表示されます。
非同期に値を設定する
すでにdatetimeが作成された後にプログラムでvalueが更新されると、datetimeは自動的に新しい日付にジャンプします。しかし、ユーザーがdatetimeを操作しているときに、この方法でvalueを更新することは避けることをお勧めします。例えば、datetimeのvalueが非同期処理で読み込まれる場合、値の更新が終わるまでCSSでdatetimeを非表示にすることをお勧めします。
日付コンテナ
日付の最小値と最大値
日付の最小値と最大値をカスタマイズするには、 min と max コンポーネントプロパティを使用します。上の表にあるのと同じ IS0 8601 フォーマットに従って、各コンポーネントはユーザーが選択できる日付を制限することができます。
以下の例では、日付の選択を2022年3月から2022年5月のみに制限しています。
特定の値を選択する
min と max プロパティでは、日付の選択をある範囲に制限することができますが、 monthValues, dayValues, yearValues, hourValues, minuteValues プロパティでは、ユーザーが選択できる特定の日や時刻を選択することが可能です。
次の例では、15分単位で分を選択することができます。また、日付を5刻みで選択することができます。
高度な日付制限
isDateEnabled プロパティを使用すると、開発者は ion-datetime をカスタマイズして、ISO 8601 の日付文字列を使用して、特定の日、日付の範囲、週末、または任意のカスタムルールを無効にすることができる。
isDateEnabled` プロパティは、日付が有効かどうかを示すブール値を返す関数を受け付ける。この関数は、レンダリングされた各日付、前月、当月、翌月に対して呼び出されます。カスタムの実装では、ジャンクを避けるためにパフォーマンスを最適化する必要があります。
次の例では、週末の日付をすべて無効にする方法を示しています。より高度な日付操作を行うには、 date-fns のような日付ユーティリティを使用することをお勧めします。
ローカライゼーション
Ionic Frameworkでは、Intl.DatetimeFormat Web APIを利用して、ユーザーの端末に設定されている言語や地域に応じて、月名と曜日名を自動的にローカライズすることが可能です。
カスタムロケール
特定のロケールが必要な場合、 locale プロパティを使用して設定することができます。ロケールは、表示される言語と日付・時刻のフォーマットの両方を制御します。
次の例では、ロケールをスペイン語（Spanish）に設定する方法を示しています。
時刻の表記は、自動的にローカライズされません。詳しくは Time Label を参照してください。
時間サイクル
ion-datetime は、デフォルトで locale プロパティで指定された時間サイクルを使用します。例えば、 locale が en-US に設定されている場合、 ion-datetime は12時間のサイクルを使用します。
時間サイクルには4つのタイプがあります。
| Hour cycle type | Description |
|---|---|
'h12' | Hour system using 1–12; corresponds to 'h' in patterns. The 12 hour clock, with midnight starting at 12:00 am. |
'h23' | Hour system using 0–23; corresponds to 'H' in patterns. The 24 hour clock, with midnight starting at 0:00. |
'h11' | Hour system using 0–11; corresponds to 'K' in patterns. The 12 hour clock, with midnight starting at 0:00 am. |
'h24' | Hour system using 1–24; corresponds to 'k' in pattern. The 24 hour clock, with midnight starting at 24:00. |
どの時間のサイクルを使用するか、もっとコントロールする必要があるシナリオがあるかもしれません。このような場合には、 hourCycle プロパティが役に立ちます。
次の例では、 hourCycle プロパティを使用して、ロケールが en-GB であるにもかかわらず、 ion-datetime に12時間周期を使用するように強制することができます 。
週初めの日
ion-datetimeの場合、週初めの曜日はデフォルトで日曜日です。2022年現在、Ionicがデバイスのロケールに基づいて自動的に週の最初の曜日を決定するためのブラウザAPIはありませんが、これに関する作業は進行中です（参照: TC39 GitHub )．
時刻表記
時刻表記は自動的にローカライズされるわけではありません。幸いなことに、Ionicでは time-label スロットで簡単にカスタムのローカライズを提供することができます。
ロケールエクステンションタグ
ion-datetime は、 Intl.Locale API の一部として locale extension tags もサポートしています。これらのタグを使用すると、ロケールに関する情報をロケール文字列自体にエンコードすることができます。開発者は、アプリの中で Intl.Locale API を使っている場合、拡張タグのアプローチを使うことを好むかもしれません。
たとえば、 en-GB ロケールで 12 時間周期を使用したい場合は、 locale と hourCycle の両方のプロパティを使用するのではなく、拡張タグを使用します。
アプリで使用する前に、 Intl.Locale の Browser Compatibility Chart を必ず確認してください。
プレゼンテーション
デフォルトでは、 ion-datetime は日付と時刻の両方を選択することができる。さらに、ユーザは特定の月、年、時間、分を選択することができます。
ユースケースによっては、日付だけを選択したり、時間だけを選択したりすることもできます。 presentation プロパティでは、表示するピッカーとその順番を指定することができます。例えば、 date-time を設定すると、カレンダーピッカーがタイムピッカーよりも先に表示されます。 time-date を設定すると、カレンダーピッカーはtimeピッカーの後に表示されます。
月と年の選択
月と年の選択は、 presentation プロパティに month-year , month , または year を渡すことで行うことができます。
この例では、 month-year を設定した datetime を示しています。
時刻の選択
時刻の選択は、 presentation プロパティに date-time, time-date, time を渡すことで行うことができます。
この例では、timeの設定で datetime を表示しています。
日付の選択
時刻の選択は、 presentation プロパティに date-time, time-date, または date を渡すことで行うことで有効になります。
この例では、dateの設定でdatetimeを指定しています。
ピッカーのホイールスタイル
デフォルトでは、Ionicは presentation を使用する場合、グリッドスタイルのレイアウトを優先して表示します。しかし、preferWheel プロパティを使用すると、ホイールスタイルを表示することができます。preferWheelがtrue` の場合、Ionic は可能な限りホイールスタイルのレイアウトを優先して表示します。
特定の presentation オプションには、グリッドとホイールの両方のスタイルがあり、開発者は preferWheel プロパティで選択することができます。その他の presentation の値はホイールスタイルのみを持ち、グリッドスタイルは決して表示されません。下の表は、どの presentation の値がグリッドスタイルとホイールスタイルを持つかを示しています。
presentation | グリッドシステム | ホイールシステム |
|---|---|---|
date | Yes | Yes |
date-time | Yes | Yes |
month | No | Yes |
month-year | No | Yes |
time | No | Yes |
time-date | Yes | Yes |
year | No | Yes |
以下の例で は、ホイールピッカーに presentation="date-time" を指定しています。
複数の日付の選択
multipleプロパティがtrueに設定されている場合、カレンダーピッカーから複数の日付を選択することができます。選択した日付をクリックすると選択が解除されます。
This property is only supported when using presentation="date" and 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 メソッドを呼び出す必要があります。
確認ボタンの表示
デフォルトのDoneボタンとCancelボタンは、それぞれ confirm と cancel メソッドを呼び出すように予め設定されています。
ボタンテキストのカスタマイズ
単純なユースケースの場合、開発者は doneText と cancelText プロパティを使用して、確認とキャンセルの値にカスタムボタンテキストを指定することができます。この方法は、ボタンのテキストを変更するだけで、カスタムビヘイビアを必要としない場合に推奨します。
ボタン要素のカスタマイズ
開発者は、高度なカスタム動作のための独自のボタンを提供することができる。
ion-datetime には confirm, cancel, reset メソッドがあり、開発者がカスタムボタンをクリックした際に呼び出すことができる。また、 reset メソッドには、日付のリセット先を指定することができます。
特定の日付をハイライトする
highlightedDatesプロパティを使用すると、開発者は特定の日付をカスタムテキストや背景色でスタイル設定することができます。このプロパティは、日付とその色の配列として定義するか、ISO 文字列を受け取って使用する色を返すコールバックとして定義することができます。
色を指定する場合は、有効な CSS カラーフォーマットを使用できます。これには、16進コード、rgba 、color variables などが含まれます。
一貫したユーザーエクスペリエンスを維持するため、選択された日付のスタイルは常にカスタムハイライトよりも優先されます。
This property is only supported when preferWheel="false", and using a presentation of either "date", "date-time", or "time-date".
配列を利用
ハイライトが期日などの固定された日付に適用される場合は、配列の方が適しています。
Callbackを利用
誕生日や定期的なミーティングなど、ハイライトされた日付が繰り返される場合は、コールバックを使用した方がよいでしょう。
スタイリング
グローバルテーマ
Ionicの強力なテーマシステムを使用すると、特定のテーマに合わせてアプリ全体を簡単に変更することができます。この例では、Color Creator と Stepped Color Generator を使用して、 ion-datetime で使用できるローズ色のパレットを作成しました。
この方法の利点は、ion-datetimeだけでなく、すべてのコンポーネントが自動的にこのテーマを利用できることです。
Calendar Days
The calendar days in a grid-style ion-datetime can be styled using CSS shadow parts.
The example below selects the day 2 days ago, unless that day is in the previous month, then it selects a day 2 days in the future. This is done for demo purposes in order to show how to apply custom styling to all days, the current day, and the selected day.
Wheel Pickers
ion-datetimeで使用するホイールは、シャドウパーツとCSS変数を組み合わせてスタイルを設定することができます。これは、ホイールスタイルのdatetimeのカラムにも、グリッドスタイルのdatetimeの月/年のピッカーにも適用されます。
タイムゾーン
Ionicの ion-datetime は、datetime-local の動作に従い、datetimeコントロールの内部でタイムゾーンを操作・設定することはありません。つまり、「07:00」という時刻の値は、異なるタイムゾーンに応じて調整されることはありません。
date-fns-tz のようなライブラリを使用して、datetimeの値を希望するタイムゾーンに変換することをお勧めします。
以下は、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
See https://date-fns.org/docs/format for a list of all the valid format tokens.
高度な日時の検証および操作
datetime ピッカーは、正確なフォーマットを選択するシンプルさを提供し、
標準化された ISO 8601 datetime format を使用して、
datetime 値を文字列として持続させることができます。
しかし、 ion-datetime は、datetimeの値を検証したり操作したりするときに、
すべての状況を解決しようとするわけではないことに注意することが重要です。
もし、datetimeの値を特定のフォーマットからパースしたり、
操作したり(例えば、日付に5日足したり、30分を引いたり)、
あるいは、特定のロケールにデータをフォーマットする必要があるなら、
JavaScriptで日 付を扱うために date-fns を使うことを強くお勧めします。
アクセシビリティ
キーボードインタラクション
ion-datetime は、コンポーネント内のフォーカス可能な要素間を移動するためのフルキーボードサポートを備えています。次の表は、それぞれのキーが何をするのかの詳細です。
| Key | Description |
|---|---|
| Tab | Moves focus to the next focusable element. |
| Shift + Tab | Moves focus to the previous focusable element. |
| Space or Enter | Clicks the focusable element. |
日付の表示
| Key | Description |
|---|---|
| ArrowUp | Moves focus to the same day of the previous week. |
| ArrowDown | Moves focus to the same day of the next week. |
| ArrowRight | Moves focus to the next day. |
| ArrowLeft | Moves focus to the previous day. |
| Home | Moves focus to the first day of the current week. |
| End | Moves focus to the last day of the current week. |
| PageUp | Changes the grid of dates to the previous month. |
| PageDown | Changes the grid of dates to the next month. |
| Shift + PageUp | Changes the grid of dates to the previous year. |
| Shift + PageDown | Changes the grid of dates to the next year. |
時刻、月、年のホイール
Datetimeのホイールピッカーは、内部的に Picker を使用しています。ホイールピッカーのアクセシビリティ機能の詳細については、 ピッカー アクセシビリティ を参照してください。
Interfaces
DatetimeChangeEventDetail
interface DatetimeChangeEventDetail {
value?: string | null;
}
DatetimeCustomEvent
必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent インターフェースの代わりにこのインターフェースを使用することが可能です。
interface DatetimeCustomEvent extends CustomEvent {
detail: DatetimeChangeEventDetail;
target: HTMLIonDatetimeElement;
}
プロパティ
cancelText
| Description | ピッカーのキャンセルボタンに表示するテキストです。 |
| Attribute | cancel-text |
| Type | string |
| Default | 'Cancel' |
clearText
| Description | ピッカーの"Clear"ボタンに表示するテキストです。 |
| Attribute | clear-text |
| Type | string |
| Default | 'Clear' |
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' |
dayValues
| Description | 選択可能な日のリストを作成するために使用する値です。デフォルトでは、指定した月のすべての曜日が表示されます。しかし、表示する曜日を正確に制御するために、dayValues には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。配列のdayが2月の31のように選択した月にとって無効な数字であっても、選択した月にとって有効でない日は正しく表示されないことに注意してください。 |
| Attribute | day-values |
| Type | number ｜ number[] ｜ string ｜ undefined |
| Default | undefined |
disabled
| Description | trueの場合、ユーザはdatetimeを操作することができません。 |
| Attribute | disabled |
| Type | boolean |
| Default | false |
doneText
| Description | ピッカーの "Done "ボタンに表示するテキスト。 |
| Attribute | done-text |
| Type | string |
| Default | 'Done' |
firstDayOfWeek
| Description | ion-datetimeに使用する週の最初の曜日を指定します。デフォルト値は 0` で、日曜日を表す。 |
| Attribute | first-day-of-week |
| Type | number |
| Default | 0 |
formatOptions
| Description | 日付と時刻のフォーマットオプション。それぞれIntl.DateTimeFormatOptions型です。 |
| Attribute | undefined |
| Type | undefined ｜ { date: DateTimeFormatOptions; time?: DateTimeFormatOptions ｜ undefined; } ｜ { date?: DateTimeFormatOptions ｜ undefined; time: DateTimeFormatOptions; } |
| Default | undefined |
highlightedDates
| Description | 特定の日付にカスタムテキストと背景色を適用するために使用します。 ISO 文字列と色を含むオブジェクトの配列、または ISO 文字列を受け取って色を返すコールバックのいずれかを指定します。 preferWheel="false"を持つ date、date-time、time-date` のプレゼンテーションにのみ適用されます。 |
| Attribute | undefined |
| Type | ((dateIsoString: string) => DatetimeHighlightStyle ｜ undefined) ｜ DatetimeHighlight[] ｜ undefined |
| Default | undefined |
hourCycle
| Description | ion-datetime`の時間周期を指定します。値が設定されていない場合、現在のロケールによって指定される。 |
| Attribute | hour-cycle |
| Type | "h11" ｜ "h12" ｜ "h23" ｜ "h24" ｜ undefined |
| Default | undefined |
hourValues
| Description | 選択可能な時間のリストを作成するために使用される値です。デフォルトでは、24時間制の場合は 0 から 23 まで、12時間制の場合は 1 から 12 までの時間帯が設定されます。しかし、表示する時間を正確に制御するために、hourValues には数値、数値の配列、またはコンマで区切られた数値の文字列を指定することができます。 |
| Attribute | hour-values |
| Type | number ｜ number[] ｜ string ｜ undefined |
| Default | undefined |
isDateEnabled
| Description | 個々の日付(暦日)が有効か無効かを返します。 trueの場合、その日は有効/対話型になる。もし false ならば、その日は無効/非インタラクティブです。 この関数は、指定された日のISO 8601の日付文字列を受け取ります。デフォルトでは、すべての曜日が有効になります。開発者はこの関数を使用して、特定の日を無効にするカスタムロジックを記述することができます。 この関数は、レンダリングされたカレンダーの各日、前月、当月、翌月に対して呼び出されます。カスタム実装は、ジャンクを避けるためにパフォーマンスを最適化する必要があります。 |
| Attribute | undefined |
| Type | ((dateIsoString: string) => boolean) ｜ undefined |
| Default | undefined |
locale
| Description | ion-datetimeに使用するロケールを指定します。これは月と日の名前のフォーマットに影響します。"default"`の値は、あなたのデバイスが設定するデフォルトのロケールを指します。 |
| Attribute | locale |
| Type | string |
| Default | 'default' |
max
| Description | 許容される最大のdatetimeを指定します。値は、ISO 8601 datetime format standard の 1996-12-19 に従った日付文字列である必要があります。このフォーマットは、正確な日付時刻を指定する必要はありません。例えば、最大で1994のような年号を指定することができます。デフォルトはこの年の末日です。 |
| Attribute | max |
| Type | string ｜ undefined |
| Default | undefined |
min
| Description | 許容される最小のdatetime。値は ISO 8601 datetime format standard に従った日付文字列でなければならず、例えば 1996-12-19 のようなものです。このフォーマットは、正確な日付時刻を指定する必要はありません。例えば、最小値は1994のような年号だけでいいです。デフォルトは、今日から100年前の年頭です。 |
| Attribute | min |
| Type | string ｜ undefined |
| Default | undefined |
minuteValues
| Description | 選択可能な分数のリストを作成するために使用される値です。デフォルトでは、分数は 0 から 59 までの範囲です。しかし、表示する分を正確に制御するために、minuteValues には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。例えば、分表示を15分ごとに行う場合は、 minuteValues="0,15,30,45" と入力することになります。 |
| Attribute | minute-values |
| Type | number ｜ number[] ｜ string ｜ undefined |
| Default | undefined |
mode
| Description | modeは、どのプラットフォームのスタイルを使用するかを決定します。 |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
monthValues
| Description | 選択可能な月のリストを作成するために使用する値。デフォルトでは、月の値は 1 から 12 までの範囲です。しかし、どの月を表示するかを正確に制御するために、monthValues には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。例えば、夏の月だけを表示する場合、この入力値は monthValues="6,7,8" となります。つまり、1月の値は 1 であり、12月の値は 12 です。 |
| Attribute | month-values |
| Type | number ｜ number[] ｜ string ｜ undefined |
| Default | undefined |
multiple
| Description | trueの場合、複数の日付を一度に選択することができる。presentation="date"と preferWheel="false"` にのみ適用される。 |
| Attribute | multiple |
| Type | boolean |
| Default | false |
name
| Description | フォームデータとともに送信されるコントロールの名前。 |
| Attribute | name |
| Type | string |
| Default | this.inputId |
preferWheel
| Description | trueの場合、可能な限りカレンダーグリッドの代わりにホイールピッカーが表示されます。もし false ならば、可能な限りホイールピッカーの代わりにカレンダーグリッドがレンダリングされます。 ホイールピッカーは、presentationが以下の値の場合、グリッドの代わりにレンダリングすることができます：presentationが "date", "date-time", または "time-date". ホイールピッカーは、preferWheelの値に関係なく、presentationが次の値のいずれかである場合に常にレンダリングされます："time", "month", "month-year", または "year". |
| Attribute | prefer-wheel |
| Type | boolean |
| Default | false |
presentation
| Description | どの値を選択するか。"date"はカレンダーピッカーを表示し、月、日、年を選択します。"time"は時間ピッカーを表示し、時、分、そして（オプションで）AM/PMを選択します。"date-time"は、日付ピッカーを最初に、時間ピッカーを次に表示します。"time-date"`は、最初に時間ピッカー、2番目に日付ピッカーを表示します。 |
| Attribute | presentation |
| Type | "date" ｜ "date-time" ｜ "month" ｜ "month-year" ｜ "time" ｜ "time-date" ｜ "year" |
| Default | 'date-time' |
readonly
| Description | true`の場合、日付は正常に表示されるが、選択された日付は変更できない。 |
| Attribute | readonly |
| Type | boolean |
| Default | false |
showClearButton
| Description | trueの場合、ion-datetimeコンポーネントの下部にあるデフォルトの "Cancel "と "OK "ボタンと一緒に "Clear "ボタンがレンダリングされます。これらのボタンをカスタマイズしたい場合、開発者は button slotを使用することもできる。カスタムボタンが button slotに設定されている場合、デフォルトのボタンはレンダリングされません。 |
| Attribute | show-clear-button |
| Type | boolean |
| Default | false |
showDefaultButtons
| Description | trueの場合、ion-datetimeコンポーネントの下部にデフォルトの "Cancel" と "OK" ボタンがレンダリングされます。これらのボタンをカスタマイズしたい場合は、buttonslotを使用することもできます。カスタムボタンが button slotに設定されている場合、デフォルトのボタンはレンダリングされません。 |
| Attribute | show-default-buttons |
| Type | boolean |
| Default | false |
showDefaultTimeLabel
| Description | trueの場合、ion-datetimeコンポーネントの時間セレクタにデフォルトの "Time "ラベルがレンダリングされる。このラベルをカスタマイズしたい場合は、time-labelslotを使用することもできます。 time-label slotにカスタムラベルが設定されている場合、デフォルトのラベルはレンダリングされません。 |
| Attribute | show-default-time-label |
| Type | boolean |
| Default | true |
showDefaultTitle
| Description | trueの場合、カレンダーピッカーの上にヘッダーが表示されます。これには、slotされたタイトルと、選択された日付の両方が含まれます。 |
| Attribute | show-default-title |
| Type | boolean |
| Default | false |
size
| Description | coverの場合、ion-datetimeはコンテナの全幅を覆うように展開される。fixedの場合、ion-datetime`は固定幅になる。 |
| Attribute | size |
| Type | "cover" ｜ "fixed" |
| Default | 'fixed' |
titleSelectedDatesFormatter
| Description | 選択されている日付の数を示すヘッダーテキストをフォーマットするために使用されるコールバック。選択されている日付が 0 あるいは 1 以上の場合にのみ使用されます (つまり、1 の場合は未使用です)。デフォルトでは、ヘッダテキストは "numberOfDates days "に設定されます。 コールバック内から this にアクセスする必要がある場合は https://ionicframework.com/docs/troubleshooting/runtime#accessing-this を参照。 |
| Attribute | undefined |
| Type | ((selectedDates: string[]) => string) ｜ undefined |
| Default | undefined |
value
| Description | datetimeの値を有効なISO 8601 datetime文字列として指定します。これは、multiple="true"の場合のみ、文字列の配列です。 |
| Attribute | value |
| Type | null ｜ string ｜ string[] ｜ undefined |
| Default | undefined |
yearValues
| Description | 選択可能な年のリストを作成するために使用する値。デフォルトでは、年の値は日付の min と max の間に設定される。しかし、表示する年を正確に制御するために、 yearValues 入力には数値、数値の配列、カンマで 区切られた数値の文字列を指定することができます。例えば、うるう年と最近のうるう年を表示する場合、この入力の値は yearValues="2008,2012,2016,2020,2024" となります。 |
| Attribute | year-values |
| Type | number ｜ number[] ｜ string ｜ undefined |
| Default | undefined |
イベント
| Name | Description | Bubbles |
|---|---|---|
ionBlur | datetimeのフォーカスが外れたときに発行されます。 | true |
ionCancel | datetimeの選択がキャンセルされたときに発生します。 | true |
ionChange | Emitted when the value (selected date) has changed. This event will not emit when programmatically setting the value property. | true |
ionFocus | datetimeにフォーカスが当たったときに発行されます。 | true |
メソッド
cancel
| Description | ionCancel イベントを発行し、オプションで datetime が表示されたポップオーバーまたはモーダルを閉じます。 |
| Signature | cancel(closeOverlay?: boolean) => Promise<void> |
confirm
| Description | 選択されたdatetimeの値を確認し、valueプロパティを更新し、オプションでdatetimeが表示されていたポップオーバーまたはモーダルを閉じます。 |
| Signature | confirm(closeOverlay?: boolean) => Promise<void> |
reset
| Description | datetimeの内部状態をリセットするが、値は更新しません。有効なISO-8601文字列を渡すと、コンポーネントの状態は指定した日付にリセットされます。値が提供されない場合、内部状態はmin、max、todayのクランプされた値にリセットされます。 |
| Signature | reset(startDate?: string) => Promise<void> |
CSS Shadow Parts
| Name | Description |
|---|---|
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 | 現在選択されているホイール項目。 |
CSSカスタムプロパティ
- iOS
- MD
| Name | Description |
|---|---|
--background | datetimeコンポーネントの主な背景。 |
--background-rgb | datetimeコンポーネントの主な背景をRGBフォーマットで示します。 |
--title-color | タイトルの文字色です。 |
--wheel-fade-background-rgb | ホイールスタイルレイアウトの場合は非選択項目を覆うグラデーションの色、グリッドスタイルレイアウトの場合は月/年ピッカーの色。255,255,255`のようなRGBフォーマットでなければなりません。 |
--wheel-highlight-background | ホイールスタイルレイアウトの場合は選択された項目の下、グリッドスタイルレイアウトの場合は月/年ピッカーのハイライトの背景。 |
--wheel-highlight-border-radius | ホイールスタイルレイアウトの場合は選択された項目の下、グリッドスタイルレイアウトの場合は月/年ピッカーのハイライトの境界半径。 |
| Name | Description |
|---|---|
--background | datetimeコンポーネントの主な背景。 |
--background-rgb | datetimeコンポーネントの主な背景をRGBフォーマットで示します。 |
--title-color | タイトルの文字色です。 |
--wheel-fade-background-rgb | ホイールスタイルレイアウトの場合は非選択項目を覆うグラデーションの色、グリッドスタイルレイアウトの場合は月/年ピッカーの色。255,255,255`のようなRGBフォーマットでなければなりません。 |
--wheel-highlight-background | ホイールスタイルレイアウ トの場合は選択された項目の下、グリッドスタイルレイアウトの場合は月/年ピッカーのハイライトの背景。 |
--wheel-highlight-border-radius | ホイールスタイルレイアウトの場合は選択された項目の下、グリッドスタイルレイアウトの場合は月/年ピッカーのハイライトの境界半径。 |
Slots
| Name | Description |
|---|---|
buttons | datetimeのボタンです。 |
time-label | datetimeの時間セレクタのラベルです。 |
title | datetimeのタイトルです。 |