React Date Time Input (日時入力) の概要

Ignite UI for React Date Time Input を使用すると、ユーザーは選択した入力要素で日付と時刻を設定および編集できます。ユーザーは、編集可能なマスクされた入力を使用して、日付と時刻の両方のパーツを編集できます。さらに、検証に最小値と最大値だけでなく、希望の表示形式および入力形式の設定を指定できます。

使用方法

まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:

npm install igniteui-react

次に、以下のように、IgrDateTimeInput と必要な CSS をインポートする必要があります:

import { IgrDateTimeInput } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

値バインディング

IgrDateTimeInput コンポーネントの値を設定する最も簡単な方法は、Date オブジェクトを Value プロパティに渡すことです。

<IgrDateTimeInput value={someValue}></IgrDateTimeInput>

IgrDateTimeInput は、ISO 8601 文字列も受け入れます。

文字列は、YYYY-MM-DDTHH:mm:ss.sssZ の形式の完全な ISO 文字列にすることも、日付のみと時間のみのパーツに分割することもできます。

日付のみ

日付のみの文字列がコンポーネントの Value プロパティにバインドされている場合は、YYYY-MM-DD の形式である必要があります。InputFormat は、入力に値を入力するときに引き続き使用され、同じ形式である必要はありません。さらに、日付のみの文字列をバインドする場合、ディレクティブは時刻を T00:00:00 に強制することにより、時刻のずれを防ぎます。

時刻のみ

時刻のみの文字列は通常、ECMA 仕様では定義されていませんが、時刻のみのソリューションを必要とするシナリオにディレクティブを統合できるようにするために、24 時間形式 (HH:mm:ss) をサポートしています。12 時間形式はサポートされていません。

完全な ISO 文字列

完全な ISO 文字列がバインドされている場合、ディレクティブは、Date.parse に必要なすべての要素が提供されている場合にのみそれを解析します。

InvalidDate を含むすべての falsy の値は、null として解析されます。不完全な日付のみ、時間のみ、または完全な ISO 文字列は、InvalidDate として解析されます。

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

IgrDateTimeInput には直感的なキーボード ナビゲーションがあり、マウスに触れることなく、さまざまな DatePart を簡単に増分、減分、またはジャンプできます。

書式の設定

IgrDateTimeInput は、さまざまな表示形式と入力形式をサポートしています。

Intl.DateTimeFormat を使用して、long と short、medium と full などの事前定義された書式オプションをサポートできるようにします。さらに、dd-MM-yy などのサポートされている文字から構築されたカスタム文字列を受け入れることもできます。また、DisplayFormat が指定されていない場合、コンポーネントは InputFormat をそのまま使用します。

入力書式

次の表は、コンポーネントの InputFormat でサポートされている形式を示しています。

特定の入力形式を設定するには、それを文字列として IgrDateTimeInput に渡します。これにより、予想されるユーザー入力形式と mask の両方が設定されます。さらに、InputFormat はロケール ベースであるため、何も指定されていない場合、エディターはデフォルトで dd/MM/yyyy になります。

<IgrDateTimeInput inputFormat="dd-MM-yy" displayFormat="medium"></IgrDateTimeInput>

以下は結果です:

表示書式

日時入力は、さまざまな方法で日付 / 時刻を表示するための事前定義された形式を公開します。以下の例はすべて、en-US ロケールで示されています。

さらに、ユーザーは、次の表で説明されているサポートされている記号を使用して、displayFormat 文字列を作成できます。

最小値 / 最大値

Min および Max プロパティを指定して、コンポーネントの入力を制限し、有効性を制御できます。Value プロパティと同様に、string 型にすることができます。

 <IgrDateTimeInput min={minDate} max={maxDate}></IgrDateTimeInput>

すべてがうまくいった場合、値が指定された日付よりも大きいか小さい場合、コンポーネントは invalid になります。以下の例をご覧ください:

ステップアップ / ステップダウン

IgrDateTimeInput は、公開な StepUp メソッドと StepDown メソッドを公開します。現在設定されている日付と時刻の特定の DatePart を増減し、いくつかの方法で使用できます。

最初のシナリオでは、特定の DatePart がメソッドに渡されない場合、指定した InputFormat および内部コンポーネントの実装に基づいてデフォルトの DatePart が増減します。2 番目のシナリオでは、さまざまな要件を満たすために操作する DatePart を明示的に指定できます。また、どちらのメソッドも、stepUp/stepDown ステップを設定するために使用できるタイプ番号のオプションの delta パラメーターを受け入れます。

以下の例をご覧ください。

スタイル設定

IgrDateTimeInput コンポーネントは、その内部要素のほとんどすべての CSS パーツを公開します。次の表に、公開されているすべての CSS パーツを示します。

igc-date-time-input {
    --_background: var(--ig-primary-200);
    --_foreground: var(--ig-gray-900);

    --input-prefix-color: var(--_foreground);
    --input-suffix-color: var(--_foreground);
    --input-prefix-color--filled: var(--_foreground);
    --input-suffix-color--filled: var(--_foreground);
    --input-prefix-background: var(--_background);
    --input-suffix-background: var(--_background);
    --input-prefix-background--filled: var(--_background);
    --input-suffix-background--filled: var(--_background);
    --input-prefix-color--focused: var(--_foreground);
    --input-suffix-color--focused: var(--_foreground);
    --input-prefix-background--focused: var(--_background);
    --input-suffix-background--focused: var(--_background);
}

API リファレンス

その他のリソース

• Ignite UI for React フォーラム (英語)
• Ignite UI for React GitHub (英語)