日付範囲ピッカー

日付範囲ピッカーは、2つのDateInputとRangeCalendarポップオーバーを組み合わせて、ユーザーが日付と時間範囲を入力または選択できるようにします。

インストール

npx nextui-cli@latest add date-picker

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

インポート

使い方

無効

読み取り専用

必須

もし、isRequired プロパティを input に渡すと、ラベルの最後に danger のアスタリスクが表示され、input は必須になります。

バリアント

表示月数

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

ページ動作

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

ラベルの配置

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

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

説明付き

descriptionプロパティを渡すことで、入力に説明を追加できます。

エラーメッセージ付き

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

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

時間フィールド付き

CalendarDateTimeまたはZonedDateTimeオブジェクトが値として提供されると、DateRangePickerは自動的に時間フィールドを含めます。

セレクターアイコン

selectorを使用して、date-range-pickerの開始と終了にコンテンツを追加できます。

制御されたコンポーネント

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

タイムゾーン

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

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

npm install @internationalized/date

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

粒度

granularityプロパティを使用すると、DateRangePickerによって表示される最小単位を制御できます。デフォルトでは、値は「日」の粒度（年、月、日）で表示され、CalendarDateTimeおよびZonedDateTimeの値は「分」の粒度で表示されます。

@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";

国際カレンダー

DateRangePickerは、グレゴリオ暦、ヘブライ暦、インド暦、イスラム暦、仏教暦など、世界中で使用されている多くの暦システムでの日付選択をサポートしています。日付は、ユーザーのロケールに適した暦システムで自動的に表示されます。暦システムは、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";

利用不可の日付

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

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

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

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

非連続

allowsNonContiguousRanges プロパティを使用すると、範囲の中間に利用できない日付があっても、範囲を選択できます。onChange イベントで出力される値は、開始日と終了日のプロパティを持つ単一の範囲になりますが、利用できない日付は選択されたものとして表示されません。アプリケーションは、ビジネスロジックに必要な場合に、選択されたフル範囲を複数に分割する必要があります。

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

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

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

プリセット

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

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

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

スロット

• base: 基本要素。配置、位置、および一般的な外観を処理します。
• label: date-range-picker のラベル。日付入力の上、内側、または左側に表示されるものです。
• calendar: カレンダー要素。
• selectorButton: セレクターボタン要素。
• selectorIcon: セレクターアイコン要素。
• popoverContent: カレンダーポップオーバー要素。
• calendarContent: カレンダーのコンテンツ要素。
• inputWrapper: label (内側にある場合) と innerWrapper をラップします。
• input: 入力要素。
• segment: セグメント要素。
• separator: 区切り要素。
• bottomContent: 下部コンテンツ要素。
• timeInputWrapper: 入力要素のラッパー要素。
• helperWrapper: description と errorMessage をラップします。
• description: date-input の説明。
• errorMessage: date-input のエラーメッセージ。

データ属性

DateRangePicker には、base 要素に次の属性があります。

• data-slot: すべてのスロットにこのプロパティがあります。要素が表すスロット (例: canlendar)。
• data-open: カレンダーポップオーバーが開いているかどうかを示します。
• data-invalid: date-range-picker が無効な場合。isInvalid プロパティに基づきます。
• data-required: date-range-picker が必須の場合。isRequired プロパティに基づきます。
• data-readonly: date-range-picker が読み取り専用の場合。isReadOnly プロパティに基づきます。
• data-disabled: date-range-picker が無効になっている場合。isDisabled プロパティに基づきます。
• data-has-start-content: date-range-picker に開始コンテンツがある場合。これらの startContent プロパティに基づきます。
• data-has-end-content: date-range-picker に終了コンテンツがある場合。これらの endContent プロパティに基づきます。
• data-has-multiple-months: date-range-picker の visibleMonth が 2 より大きい場合。

アクセシビリティ

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

API

DateRangePicker のプロパティ

DateRangePicker Events