Version: v7

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時」を意味します。

note

秒、ミリ秒、タイムゾーンは ISO 8601 datetime フォーマットで指定できますが、 ion-datetime は秒、ミリ秒、タイムゾーンを選択するためのインターフェイスを提供しません。秒、ミリ秒、タイムゾーンの値を指定しても無視されます。

基本的な使い方

日付ボタンと使う

モーダルやポップオーバーなどのオーバーレイで日付時刻を表示する必要がある場合は、 ion-datetime-button を使用することをお勧めします。スペースに制約がある場合は、 ion-datetime-button を使用する必要があります。このコンポーネントは、現在の日付と時刻の値を表示するボタンを表示します。ボタンがタップされると、日付と時刻のピッカーがオーバーレイで表示されます。

日付コンテナ

日付の最小値と最大値

日付の最小値と最大値をカスタマイズするには、 min と max コンポーネントプロパティを使用します。上の表にあるのと同じ IS0 8601 フォーマットに従って、各コンポーネントはユーザーが選択できる日付を制限することができます。

次の例では、日付の選択を 2022 年 3 月から 2022 年 5 月のみに制限しています。

特定の値を選択する

min と max プロパティでは、日付の選択をある範囲に制限することができますが、 monthValues, dayValues, yearValues, hourValues, minuteValues プロパティでは、ユーザーが選択できる特定の日や時刻を選択することが可能です。

次の例では、15分単位で分を選択することができます。また、日付を5刻みで選択することができます。

高度な日付制限

isDateEnabled プロパティを使用すると、開発者は ISO 8601 日付文字列を使用して、特定の日、日付の範囲、週末、または任意のカスタムルールを無効にするように ion-datetime をカスタマイズすることができます。 isDateEnabled プロパティは、日付が有効かどうかを示す boolean 値を返す関数を受け付けます。この関数は、レンダリングされた各日付、前月、今月、来月に対して呼び出されます。カスタムの実装では、ジャンキングを避けるために、パフォーマンスを最適化する必要があります。

次の例では、週末の日付をすべて無効にする方法を示しています。より高度な日付操作を行うには、 date-fns のような日付ユーティリティを使用することをお勧めします。

ローカライゼーション

Ionic Frameworkでは、Intl.DatetimeFormat Web APIを利用して、ユーザーの端末に設定されている言語や地域に応じて、月名と曜日名を自動的にローカライズすることが可能です。

カスタムロケール

特定のロケールが必要な場合、 locale プロパティを使用して設定することができます。ロケールは、表示される言語と日付・時刻のフォーマットの両方を制御します。

次の例では、ロケールをスペイン語（Spanish）に設定する方法を示しています。

note

時刻の表記は、自動的にローカライズされません。詳しくは 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.

note

ソース: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle

どの時間のサイクルを使用するか、もっとコントロールする必要があるシナリオがあるかもしれません。このような場合には、 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 の両方のプロパティを使用するのではなく、拡張タグを使用します。

note

アプリで使用する前に、 Intl.Locale の Browser Compatibility Chart を必ず確認してください。

プレゼンテーション

デフォルトでは、 ion-datetime は日付と時刻の両方を選択することができる。さらに、ユーザは特定の月、年、時間、分を選択することができます。

ユースケースによっては、日付だけを選択したり、時間だけを選択したりすることもできます。 presentation プロパティでは、表示するピッカーとその順番を指定することができます。例えば、 date-time を設定すると、カレンダーピッカーがタイムピッカーよりも先に表示されます。 time-date を設定すると、カレンダーピッカーはtimeピッカーの後に表示されます。

月と年の選択

月と年の選択は、 presentation プロパティに month-year , year-month , 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 Date Selection

If the multiple property is set to true, multiple dates can be selected from the calendar picker. Clicking a selected date will deselect it.

note

This property is only supported when using presentation="date" and preferWheel="false".

タイトル

デフォルトでは、ion-datetimeは、コンポーネントに関連するヘッダーやタイトルを表示しません。開発者は showDefaultTitle プロパティを使用して、デフォルトのタイトル/ヘッダー構成を表示することができます。また、 title スロットを使用して、ヘッダーに表示される内容をカスタマイズすることもできます。

デフォルトタイトルを表示

タイトルをカスタマイズ

ボタン

デフォルトでは、新しい日付が選択されると、新しいdatetimeの値で ionChange が発行されます。 ionChange を発行する前にユーザの確認を必要とする場合は、 showDefaultButtons プロパティを true に設定するか、 buttons スロットでカスタム確認ボタンを渡すことができます。カスタムボタンを渡す場合、 ionChange を発生させるために、確認ボタンは ion-datetime の confirm メソッドを呼び出す必要があります。

確認ボタンの表示

デフォルトのDoneボタンとCancelボタンは、それぞれ confirm と cancel メソッドを呼び出すように予め設定されています。

ボタンテキストのカスタマイズ

単純なユースケースの場合、開発者は doneText と cancelText プロパティを使用して、確認とキャンセルの値にカスタムボタンテキストを指定することができます。この方法は、ボタンのテキストを変更するだけで、カスタムビヘイビアを必要としない場合に推奨します。

ボタン要素のカスタマイズ

開発者は、高度なカスタム動作のための独自のボタンを提供することができる。

ion-datetime には confirm, cancel, reset メソッドがあり、開発者がカスタムボタンをクリックした際に呼び出すことができる。また、 reset メソッドには、日付のリセット先を指定することができます。

Highlighting Specific Dates

Using the highlightedDates property, developers can style particular dates with custom text or background colors. This property can be defined as either an array of dates and their colors, or a callback that receives an ISO string and returns the colors to use.

When specifying colors, any valid CSS color format can be used. This includes hex codes, rgba, color variables, etc.

To maintain a consistent user experience, the style of selected date(s) will always override custom highlights.

note

This property is only supported when preferWheel="false", and using a presentation of either "date", "date-time", or "time-date".

Using Array

An array is better when the highlights apply to fixed dates, such as due dates.

Using Callback

A callback is better when the highlighted dates are recurring, such as birthdays or recurring meetings.

テーマ

Ionicの強力なテーマシステムを使用すると、特定のテーマに合わせてアプリ全体を簡単に変更することができます。この例では、Color Creator と Stepped Color Generator を使用して、 ion-datetime で使用できるローズ色のパレットを作成しました。

この方法の利点は、ion-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 = dateFnsTz.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	Function
`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	Function
`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.

時刻、月、年のホイール

タイムホイールピッカーを使用する場合、列がフォーカスされているときに、数字キーで時、分の値を選択することができます。

Key	Function
`ArrowUp`	Scroll to the previous item.
`ArrowDown`	Scroll to the next item.
`Home`	Scroll to the first item.
`End`	Scroll to the last item.

Interfaces

DatetimeChangeEventDetail

interface DatetimeChangeEventDetail {
  value?: string | null;
}

DatetimeCustomEvent

必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent インターフェースの代わりにこのインターフェースを使用することが可能です。

interface DatetimeCustomEvent extends CustomEvent {
  detail: DatetimeChangeEventDetail;
  target: HTMLIonDatetimeElement;
}

プロパティ

cancelText

Description	The text to display on the picker's cancel button.
Attribute	`cancel-text`
Type	`string`
Default	`'Cancel'`

clearText

Description	The text to display on the picker's "Clear" button.
Attribute	`clear-text`
Type	`string`
Default	`'Clear'`

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 & Record<never, never> ｜ undefined`
Default	`'primary'`

dayValues

Description	Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the `dayValues` input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like `31` in February, it will correctly not show days which are not valid for the selected month.
Attribute	`day-values`
Type	`number ｜ number[] ｜ string ｜ undefined`
Default	`undefined`

disabled

Description	If `true`, the user cannot interact with the datetime.
Attribute	`disabled`
Type	`boolean`
Default	`false`

doneText

Description	The text to display on the picker's "Done" button.
Attribute	`done-text`
Type	`string`
Default	`'Done'`

firstDayOfWeek

Description	The first day of the week to use for `ion-datetime`. The default value is `0` and represents Sunday.
Attribute	`first-day-of-week`
Type	`number`
Default	`0`

highlightedDates

Description	Used to apply custom text and background colors to specific dates. Can be either an array of objects containing ISO strings and colors, or a callback that receives an ISO string and returns the colors. Only applies to the `date`, `date-time`, and `time-date` presentations, with `preferWheel="false"`.
Attribute	`undefined`
Type	`((dateIsoString: string) => DatetimeHighlightStyle ｜ undefined) ｜ DatetimeHighlight[] ｜ undefined`
Default	`undefined`

hourCycle

Description	The hour cycle of the `ion-datetime`. If no value is set, this is specified by the current locale.
Attribute	`hour-cycle`
Type	`"h12" ｜ "h23" ｜ undefined`
Default	`undefined`

hourValues

Description	Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers.
Attribute	`hour-values`
Type	`number ｜ number[] ｜ string ｜ undefined`
Default	`undefined`

isDateEnabled

Description	Returns if an individual date (calendar day) is enabled or disabled. If `true`, the day will be enabled/interactive. If `false`, the day will be disabled/non-interactive. The function accepts an ISO 8601 date string of a given day. By default, all days are enabled. Developers can use this function to write custom logic to disable certain days. The function is called for each rendered calendar day, for the previous, current and next month. Custom implementations should be optimized for performance to avoid jank.
Attribute	`undefined`
Type	`((dateIsoString: string) => boolean) ｜ undefined`
Default	`undefined`

locale

Description	The locale to use for `ion-datetime`. This impacts month and day name formatting. The `"default"` value refers to the default locale set by your device.
Attribute	`locale`
Type	`string`
Default	`'default'`

max

Description	The maximum datetime allowed. Value must be a date string following the ISO 8601 datetime format standard, `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the maximum could just be the year, such as `1994`. Defaults to the end of this year.
Attribute	`max`
Type	`string ｜ undefined`
Default	`undefined`

min

Description	The minimum datetime allowed. Value must be a date string following the ISO 8601 datetime format standard, such as `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the minimum could just be the year, such as `1994`. Defaults to the beginning of the year, 100 years ago from today.
Attribute	`min`
Type	`string ｜ undefined`
Default	`undefined`

minuteValues

Description	Values used to create the list of selectable minutes. By default the minutes range from `0` to `59`. However, to control exactly which minutes to display, the `minuteValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if the minute selections should only be every 15 minutes, then this input value would be `minuteValues="0,15,30,45"`.
Attribute	`minute-values`
Type	`number ｜ number[] ｜ string ｜ undefined`
Default	`undefined`

mode

Description	The mode determines which platform styles to use.
Attribute	`mode`
Type	`"ios" ｜ "md"`
Default	`undefined`

monthValues

Description	Values used to create the list of selectable months. By default the month values range from `1` to `12`. However, to control exactly which months to display, the `monthValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be `monthValues="6,7,8"`. Note that month numbers do not have a zero-based index, meaning January's value is `1`, and December's is `12`.
Attribute	`month-values`
Type	`number ｜ number[] ｜ string ｜ undefined`
Default	`undefined`

multiple

Description	If `true`, multiple dates can be selected at once. Only applies to `presentation="date"` and `preferWheel="false"`.
Attribute	`multiple`
Type	`boolean`
Default	`false`

name

Description	The name of the control, which is submitted with the form data.
Attribute	`name`
Type	`string`
Default	`this.inputId`

preferWheel

Description	If `true`, a wheel picker will be rendered instead of a calendar grid where possible. If `false`, a calendar grid will be rendered instead of a wheel picker where possible. A wheel picker can be rendered instead of a grid when `presentation` is one of the following values: `"date"`, `"date-time"`, or `"time-date"`. A wheel picker will always be rendered regardless of the `preferWheel` value when `presentation` is one of the following values: `"time"`, `"month"`, `"month-year"`, or `"year"`.
Attribute	`prefer-wheel`
Type	`boolean`
Default	`false`

presentation

Description	Which values you want to select. `"date"` will show a calendar picker to select the month, day, and year. `"time"` will show a time picker to select the hour, minute, and (optionally) AM/PM. `"date-time"` will show the date picker first and time picker second. `"time-date"` will show the time picker first and date picker second.
Attribute	`presentation`
Type	`"date" ｜ "date-time" ｜ "month" ｜ "month-year" ｜ "time" ｜ "time-date" ｜ "year"`
Default	`'date-time'`

readonly

Description	If `true`, the datetime appears normal but is not interactive.
Attribute	`readonly`
Type	`boolean`
Default	`false`

showClearButton

Description	If `true`, a "Clear" button will be rendered alongside the default "Cancel" and "OK" buttons at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.
Attribute	`show-clear-button`
Type	`boolean`
Default	`false`

showDefaultButtons

Description	If `true`, the default "Cancel" and "OK" buttons will be rendered at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.
Attribute	`show-default-buttons`
Type	`boolean`
Default	`false`

showDefaultTimeLabel

Description	If `true`, the default "Time" label will be rendered for the time selector of the `ion-datetime` component. Developers can also use the `time-label` slot if they want to customize this label. If a custom label is set in the `time-label` slot then the default label will not be rendered.
Attribute	`show-default-time-label`
Type	`boolean`
Default	`true`

showDefaultTitle

Description	If `true`, a header will be shown above the calendar picker. This will include both the slotted title, and the selected date.
Attribute	`show-default-title`
Type	`boolean`
Default	`false`

size

Description	If `cover`, the `ion-datetime` will expand to cover the full width of its container. If `fixed`, the `ion-datetime` will have a fixed width.
Attribute	`size`
Type	`"cover" ｜ "fixed"`
Default	`'fixed'`

titleSelectedDatesFormatter

Description	A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".
Attribute	`undefined`
Type	`((selectedDates: string[]) => string) ｜ undefined`
Default	`undefined`

value

Description	The value of the datetime as a valid ISO 8601 datetime string. This should be an array of strings only when `multiple="true"`.
Attribute	`value`
Type	`null ｜ string ｜ string[] ｜ undefined`
Default	`undefined`

yearValues

Description	Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`.
Attribute	`year-values`
Type	`number ｜ number[] ｜ string ｜ undefined`
Default	`undefined`

イベント

Name	Description
`ionBlur`	Emitted when the datetime loses focus.
`ionCancel`	Emitted when the datetime selection was cancelled.
`ionChange`	Emitted when the value (selected date) has changed.
`ionFocus`	Emitted when the datetime has focus.

メソッド

cancel

Description	Emits the ionCancel event and optionally closes the popover or modal that the datetime was presented in.
Signature	`cancel(closeOverlay?: boolean) => Promise<void>`

confirm

Description	Confirms the selected datetime value, updates the `value` property, and optionally closes the popover or modal that the datetime was presented in.
Signature	`confirm(closeOverlay?: boolean) => Promise<void>`

reset

Description	Resets the internal state of the datetime but does not update the value. Passing a valid ISO-8601 string will reset the state of the component to the provided date. If no value is provided, the internal state will be reset to the clamped value of the min, max and today.
Signature	`reset(startDate?: string) => Promise<void>`

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

Name	Description
`--background`	The primary background of the datetime component.
`--background-rgb`	The primary background of the datetime component in RGB format.
`--title-color`	The text color of the title.

Slots

Name	Description
`buttons`	The buttons in the datetime.
`time-label`	The label for the time selector in the datetime.
`title`	The title of the datetime.

概要​

ISO 8601 Datetime Format: YYYY-MM-DDTHH:mmZ​

note

基本的な使い方​

日付ボタンと使う​

日付コンテナ​

日付の最小値と最大値​

特定の値を選択する​

高度な日付制限​

ローカライゼーション​

カスタムロケール​

note

時間サイクル​

note

週初めの日​

時刻表記​

ロケールエクステンションタグ​

note

プレゼンテーション​

月と年の選択​

時刻の選択​

日付の選択​

ピッカーのホイールスタイル​

Multiple Date Selection​

note

タイトル​

デフォルトタイトルを表示​

タイトルをカスタマイズ​

ボタン​

確認ボタンの表示​

ボタンテキストのカスタマイズ​

ボタン要素のカスタマイズ​

Highlighting Specific Dates​

note

Using Array​

Using Callback​

テーマ​

タイムゾーン​

日付の値のパース​

高度な日時の検証および操作​

アクセシビリティ​

キーボードナビゲーション​

日付の表示​

時刻、月、年のホイール​

Interfaces​

DatetimeChangeEventDetail​

DatetimeCustomEvent​

プロパティ​

cancelText​

clearText​

color​

dayValues​

disabled​

doneText​

firstDayOfWeek​

highlightedDates​

hourCycle​

hourValues​

isDateEnabled​

locale​

max​

min​

minuteValues​

mode​

monthValues​

multiple​

name​

preferWheel​

presentation​

readonly​

showClearButton​

showDefaultButtons​

showDefaultTimeLabel​

showDefaultTitle​

size​

titleSelectedDatesFormatter​

value​

yearValues​

イベント​

メソッド​

概要

ISO 8601 Datetime Format: YYYY-MM-DDTHH:mmZ

基本的な使い方

日付ボタンと使う

日付コンテナ

日付の最小値と最大値

特定の値を選択する

高度な日付制限

ローカライゼーション

カスタムロケール

時間サイクル

週初めの日

時刻表記

ロケールエクステンションタグ

プレゼンテーション

月と年の選択

時刻の選択

日付の選択

ピッカーのホイールスタイル

Multiple Date Selection

タイトル

デフォルトタイトルを表示

タイトルをカスタマイズ

ボタン

確認ボタンの表示

ボタンテキストのカスタマイズ

ボタン要素のカスタマイズ

Highlighting Specific Dates

Using Array

Using Callback

テーマ

タイムゾーン

日付の値のパース

高度な日時の検証および操作

アクセシビリティ

キーボードナビゲーション

日付の表示

時刻、月、年のホイール

Interfaces

DatetimeChangeEventDetail

DatetimeCustomEvent

プロパティ

cancelText

clearText

color

dayValues

disabled

doneText

firstDayOfWeek

highlightedDates

hourCycle

hourValues

isDateEnabled

locale

max

min

minuteValues

mode

monthValues

multiple

name

preferWheel

presentation

readonly

showClearButton

showDefaultButtons

showDefaultTimeLabel

showDefaultTitle

size

titleSelectedDatesFormatter

value

yearValues

イベント

メソッド

cancel

confirm

reset

CSS Shadow Parts

CSSカスタムプロパティ

Slots