DatePicker

日付ピッカーは、日付入力とカレンダーポップオーバーを組み合わせて、ユーザーが日付と時刻の値を入力または選択できるようにします。

インストール

npx nextui-cli@latest add date-picker

上記のコマンドは、個別のインストール専用です。もし、以下のものが @nextui-org/react がグローバルにインストール済みの場合は、このステップをスキップできます。

インポート

使い方

無効

読み取り専用

必須

バリアント

ラベルの配置

labelPlacement プロパティを inside、outside または outside-left に設定することで、ラベルの位置を変更できます。

注意: label が渡されない場合、labelPlacement プロパティはデフォルトで outside になります。

説明文付き

description プロパティを渡すことで、日付ピッカーに説明を追加できます。

エラーメッセージ付き

isInvalid プロパティと errorMessage プロパティを組み合わせることで、無効な入力を表示できます。

エラーメッセージを関数として渡すこともできます。これにより、ValidationResult に基づいた動的なエラーメッセージ処理が可能になります。

月と年ピッカーの場合

タイムフィールドの場合

セレクターアイコン

selector を使用して、日付ピッカーの開始と終了にコンテンツを追加できます。

制御された状態

value プロパティと onChange プロパティを使用して、入力値を制御できます。

タイムゾーン

ZonedDateTime オブジェクトが値として提供される場合、DatePicker はタイムゾーンを認識します。この場合、タイムゾーンの略語が表示され、夏時間などのタイムゾーンに関する問題は、値が操作される際に考慮されます。

@internationalized/date には、複数の形式の文字列を ZonedDateTime オブジェクトに解析するための関数が含まれています。

npm install @internationalized/date

import {parseZonedDateTime} from "@internationalized/date";

粒度

granularity プロパティを使用すると、DatePicker で表示される最小単位を制御できます。デフォルトでは、値は "day" の粒度（年、月、日）で表示され、CalendarDateTime と ZonedDateTime の値は "minute" の粒度で表示されます。

@internationalized/date には、複数の形式の文字列を ZonedDateTime オブジェクトに解析するための関数が含まれています。

npm install @internationalized/date @react-aria/i18n

import {DateValue, now, parseAbsoluteToLocal} from "@internationalized/date";
import {useDateFormatter} from "@react-aria/i18n";

最小日付と最大日付

minValue および maxValue プロパティを使用して、値が特定の範囲内にあることを保証することもできます。

@internationalized/date には、複数の形式の文字列を ZonedDateTime オブジェクトに解析するための関数が含まれています。

npm install @internationalized/date

import {getLocalTimeZone, parseDate, today} from "@internationalized/date";

国際カレンダー

DatePicker は、グレゴリオ暦、ヘブライ暦、インド暦、イスラム暦、仏暦など、世界中で使用されている多くの暦体系での日付選択をサポートしています。日付は、ユーザーのロケールに適切な暦体系で自動的に表示されます。暦体系は、Unicode 暦ロケール拡張機能を使用してオーバーライドでき、I18nProvider コンポーネントに渡されます。

@internationalized/date には、複数の形式の文字列を ZonedDateTime オブジェクトに解析するための関数が含まれています。

npm install @internationalized/date @react-aria/i18n

import {DateValue, now, parseAbsoluteToLocal} from "@internationalized/date";
import {I18nProvider} from "@react-aria/i18n";

利用不可の日付

DatePicker は、特定の日付を利用不可としてマークすることをサポートしています。これらの日付はユーザーが選択できず、カレンダーには取り消し線付きで表示されます。日付フィールドでは、ユーザーが利用不可の日付を入力すると、無効な状態が表示されます。

@internationalized/date には、複数の形式の文字列を ZonedDateTime オブジェクトに解析するための関数が含まれています。

npm install @internationalized/date @react-aria/i18n

import {today, isWeekend, getLocalTimeZone} from "@internationalized/date";
import {useLocale} from "@react-aria/i18n";

表示される月

デフォルトでは、カレンダーのポップオーバーには 1 か月が表示されます。visibleMonths プロパティを使用すると、画面スペースが許せば、一度に最大 3 か月を表示できます。

ページ動作

デフォルトでは、次へまたは前のボタンを押すと、ページネーションは visibleMonths 値だけ進みます。この動作は、pageBehavior を single に設定することで、代わりに単一月ごとにページ送りするように変更できます。

プリセット

@internationalized/date には、複数の形式の文字列を ZonedDateTime オブジェクトに解析するための関数が含まれています。

npm install @internationalized/date @react-aria/i18n

import {
  DateValue,
  now,
  useLocale,
  startOfWeek,
  startOfMonth,
  useDateFormatter,
  getLocalTimeZone,
} from "@internationalized/date";
import {I18nProvider} from "@react-aria/i18n";

スロット

• base: 入力ラッパー。配置、アラインメント、一般的な外観を処理します。
• selectorButton: セレクターボタン要素。
• selectorIcon: セレクターアイコン要素。
• popoverContent: カレンダーポップオーバー要素。
• calendar: カレンダー要素。
• calendarContent: カレンダーのコンテンツ要素。
• timeInputLabel: 時刻入力コンポーネントのラベル要素。
• timeInput: 時刻入力コンポーネント要素。

データ属性

DatePicker には、base 要素に以下の属性があります。

• data-slot: すべてのスロットはこのプロパティを持ちます。要素がどのスロットを表すかを示します（例：calendar）。
• data-open: カレンダーポップオーバーが開いているかどうかを示します。
• data-invalid: デートピッカーが無効な場合。isInvalid プロパティに基づきます。
• data-required: デートピッカーが必須の場合。isRequired プロパティに基づきます。
• data-readonly: デートピッカーが読み取り専用の場合。isReadOnly プロパティに基づきます。
• data-disabled: デートピッカーが無効な場合。isDisabled プロパティに基づきます。

アクセシビリティ

• 各日付および時刻単位は、個別にフォーカス可能で編集可能なセグメントとして表示され、ユーザーはキーボードを使用して、任意の日付形式とロケールで日付を簡単に編集できます。
• ユーザーは、カレンダーポップオーバーを開いて、標準の月グリッドで日付を選択することもできます。
• 選択範囲と表示されている日付範囲が変更されたときにアナウンスするローカライズされたスクリーンリーダーメッセージが含まれています。
• 日付セグメントは、使いやすいテンキーを使用して編集でき、すべての操作はタッチベースのスクリーンリーダーを使用してアクセスできます。
• HTMLフォームと統合し、必須、最小値、最大値、利用できない日付、カスタム検証関数、リアルタイム検証、およびサーバー側の検証エラーをサポートします。

API

DatePickerのプロパティ

DatePicker Events