DateInput

DateInputは、キーボードを使用して日付と時刻の値を入力および編集できるコンポーネントです。日付値の各部分は、個別に編集可能なセグメントに表示されます。

インストール

npx nextui-cli@latest add date-input

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

インポート

使用方法

無効

読み取り専用

必須

バリアント

ラベルの配置

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

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

開始 & 終了コンテンツ

startContent プロパティと endContent プロパティを使用して、DateInput の開始と終了にコンテンツを追加できます。

説明付き

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

エラーメッセージ付き

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

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

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

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

タイムゾーン

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

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

npm install @internationalized/date

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

粒度

granularity プロパティを使用すると、DateInput で表示される最小単位を制御できます。デフォルトでは、値は「日」の粒度（年、月、日）で表示され、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";

国際カレンダー

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

タイムゾーンを非表示にする

ZonedDateTime オブジェクトが DateInput の値として提供される場合、タイムゾーンの略称はデフォルトで表示されます。ただし、これが他の場所で表示されている場合、またはユースケースに基づいて暗黙的に表示されている場合は、hideTimeZone オプションを使用して非表示にできます。

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

npm install @internationalized/date

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

時間サイクル

デフォルトでは、DateInput はユーザーのロケールに応じて 12 時間または 24 時間形式で時間を表示します。ただし、特定のユースケースで必要な場合は、hourCycle プロパティを使用して上書きできます。この例では、ロケールに関係なく、DateInput で 24 時間形式を強制的に使用しています。

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

npm install @internationalized/date

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

スロット

• base: 入力ラッパー。配置、位置、および一般的な外観を処理します。
• label: date-input のラベル。date-input の上、内側、または左側に表示されるものです。
• inputWrapper: label (内側にある場合) と innerWrapper をラップします。
• input: date-input 要素。
• innerWrapper: input、startContent および endContent をラップします。
• clearButton: クリアボタン。入力の最後にあります。
• helperWrapper: description および errorMessage をラップします。
• description: date-input の説明。
• errorMessage: date-input のエラーメッセージ。

データ属性

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

• data-slot: すべてのスロットにこのプロパティがあります。要素がどのスロットを表すかを示します（例：slot）。
• data-invalid: date-input が無効な場合。isInvalid プロパティに基づきます。
• data-required: date-input が必須の場合。isRequired プロパティに基づきます。
• data-readonly: date-input が読み取り専用の場合。isReadOnly プロパティに基づきます。
• data-disabled: date-input が無効な場合。isDisabled プロパティに基づきます。
• data-has-helper: date-inputにヘルパーテキスト(errorMessage または description)がある場合。これら2つのpropsに基づきます。
• data-has-start-content: date-inputに開始コンテンツがある場合。 startContent propに基づきます。
• data-has-end-content: date-inputに終了コンテンツがある場合。 endContent propに基づきます。

アクセシビリティ

• ネイティブの<input>要素を使用して構築されています。
• 視覚的なラベル付けとARIAによるラベル付けをサポート。
• 変更、クリップボード、コンポジション、選択、および入力イベントをサポート。
• 必須および無効の状態は、ARIAを介して支援技術に公開されます。
• ARIAを介して入力にリンクされた説明およびエラーメッセージのヘルプテキストをサポート。
• 各日付と時間の単位は、個別にフォーカス可能で編集可能なセグメントとして表示され、ユーザーは任意の日付形式とロケールでキーボードを使用して日付を簡単に編集できます。
• 日付セグメントは、使いやすいテンキーを使用して編集でき、すべての操作はタッチベースのスクリーンリーダーを使用してアクセスできます。

API

DateInput Props

DateInput イベント