React Date Picker (日付ピッカー) コンポーネントの概要

Ignite UI for React Date Picker は、手動でテキストを入力して日付を入力するか、ポップアップするカレンダー ダイアログから日付値を選択するために使用される機能豊富なコンポーネントです。軽量で使いやすい Date Picker を使用すると、ユーザーは、月、年、10 年の複数の表示オプションを使用して目的の日付に移動できます。また、最小および最大の日付制約や必須フィールドなどの一般的な検証プロパティもサポートしています。

Ignite UI for React Date Picker コンポーネントを使用すると、ユーザーは月表示のカレンダー ドロップダウンまたは編集可能な入力フィールドから単一の日付を選択できます。React Date Picker は、カレンダーからのみ選択するための dialog モード、ロケール対応でカスタマイズ可能な日付の書式設定と検証の統合もサポートしています。

React Date Picker の例

以下は、ユーザーが手動のテキスト入力で日付を選択し、左側のカレンダー アイコンをクリックしてナビゲートできるようになったときに、Date Picker がどのように機能するかを示すサンプルです。描画する方法は以下のとおりです。

React Date Picker を使用した作業の開始

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

npm install igniteui-react

次に、以下のように、IgrDatePicker とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

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

Ignite UI for React の完全な概要については、作業の開始トピックを参照してください。

React Date Picker コンポーネントの使用

日付ピッカーの表示

デフォルトの dropdown 状態の IgrDatePicker をインスタンス化するには、以下のコードを使用してください。

<IgrDatePicker></IgrDatePicker>

オプション

IgrDatePicker は date にバインドできます。

const date = new Date();

<IgrDatePicker value={date}/>

コンポーネントの投影

prefix スロットと suffix スロットを使用すると、Input のメイン コンテンツの前後に異なるコンテンツを追加できます。コンテンツをスロットする際は、単純なテキスト、記号、絵文字を追加する場合は <span> 要素を使用し、prefix スロットと suffix スロットにアイコンを追加する場合は <igc-icon> コンポーネントを使用することをお勧めします。

また、Input の下にヒントを表示する helper-text スロットも公開されています。helper-text スロットにコンテンツをスロットする場合は、<span> 要素を使用することをお勧めします。

<IgrDatePicker>
    <IgrIcon
        slot="suffix"
        name="arrow_upward"
        collection="material"
        class="small"
        onClick={() => datePickerRef.current.stepUp(DatePart.Month)}>
    </IgrIcon>
</IgrDatePicker>

上記のスニペットでは、​​入力の最後、デフォルトのクリア アイコンの直後に追加のアイコンが追加されます。プレフィックスとサフィックスを次々に積み重ねることができるため、これによってデフォルトのトグル アイコンが削除されることはありません。

トグル アイコンとクリア アイコンのカスタマイズ

カレンダーとクリア アイコンは、calendar スロットと clear スロットを使用してカスタマイズできます。記号や絵文字を追加する場合は <span> 要素を使用し、calendar スロットと clear スロットにアイコンを追加する場合は <igc-icon> コンポーネントを使用することをお勧めします。

<IgrDatePicker>
    <IgrIcon slot="calendar" name="calendar" collection="material" class="small"></IgrIcon>
    <IgrIcon slot="clear" name="delete" collection="material" class="small"></IgrIcon>
</IgrDatePicker>

カスタム アクション ボタン

ピッカーのアクション ボタンは、actions スロットを使用してテンプレート化できます。最良の結果を得るには、actions スロットにコンテンツを追加する際に <igc-button> コンポーネントを使用することをお勧めします。

<IgrDatePicker>
    <IgrButton
        slot='actions'
        onClick={() => datePickerRef.current.showWeekNumbers = true}>
        <span>Show Week Numbers</span>
    </IgrButton>
</IgrDatePicker>

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

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

例

ダイアログ モード

IgrDatePicker も dialog モードをサポートしています。

<IgrDatePicker mode="dialog"></IgrDatePicker>

表示および入力形式

InputFormat および DisplayFormat は、ピッカーのエディターが指定された形式に従うように設定できるプロパティです。InputFormat はロケール ベースであるため、何も指定されていない場合、ピッカーはデフォルトでブラウザーで使用されるものになります。

注意すべき点は、Date Picker コンポーネントが date と month の部分がない形式で提供された場合、それらの部分に常に先行ゼロを追加することです。例えば、d/M/yy は dd/MM/yy になります。これは編集中にのみ適用されます。

DisplayFormat は、フォーカスされていないときにピッカーの入力を書式設定するために使用されます。DisplayFormat が指定されていない場合、ピッカーは InputFormat をその DisplayFormat として使用します。

これらの詳細については、IgrIgcDateTimeInput の形式セクションを参照してください。

増加および減少

IgrDatePicker は、StepUp メソッドと StepDown メソッドを公開します。これらは両方とも IgrIgcDateTimeInput から取得され、現在設定されている日付の特定の DatePart を増加および減少するために使用できます。

<IgrDatePicker>
    <IgrIcon
        slot="prefix"
        name="arrow_upward"
        collection="material"
        onClick={() => datePickerRef.current.stepUp(DatePart.Month)}>
    </IgrIcon>
    <IgrIcon
        slot="suffix"
        name="arrow_downward"
        collection="material"
        onClick={() => datePickerRef.current.stepDown(DatePart.Month)}>
    </IgrIcon>
</IgrDatePicker>

フォーム

IgrDatePicker はフォーム要素で使用できます。コンポーネントの Min プロパティと Max プロパティはフォーム検証機能として機能します。

フォームでは、コンポーネントの change イベントを処理し、ラベルの値を更新できます。

カレンダー固有の設定

IgrDatePicker は、Date Picker が公開するプロパティを通じて、カレンダーの設定の一部を変更できます。これらの一部には、ピッカーが展開されたときに複数のカレンダーを表示できる VisibleMonths、週の開始日を決定する WeekStart、年の各週の番号を表示する ShowWeekNumbers などが含まれます。

インターナショナリゼーション

IgrDatePicker のローカライズは、Locale 入力で制御できます。

以下は日本ロケール定義を持つ IgrDatePicker です。

<IgrDatePicker locale="ja-JP"></IgrDatePicker>

スタイル設定

IgrDatePicker コンポーネントは IgrInput コンポーネントおよび IgrCalendar コンポーネントから派生するため、使用可能なすべての CSS パーツを公開します。詳細については、Input のスタイル設定と Calendar のスタイル設定を参照してください。

igc-date-picker::part(header) {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
}
igc-date-picker::part(calendar-content) {
  background-color: var(--ig-surface-300);
}
igc-date-picker::part(date-inner current) {
  color: var(--ig-info-300);
  background-color: var(--ig-surface-300);
}
igc-date-picker::part(navigation-button):hover,
igc-date-picker::part(months-navigation):hover,
igc-date-picker::part(years-navigation):hover {
  color: var(--ig-secondary-500);
}
igc-date-picker::part(month-inner current),
igc-date-picker::part(year-inner current),
igc-date-picker::part(navigation-button),
igc-date-picker::part(months-navigation),
igc-date-picker::part(years-navigation) {
  color: var(--ig-info-300);
}
igc-date-picker::part(date-inner selected),
igc-date-picker::part(month-inner selected),
igc-date-picker::part(year-inner selected) {
  color: var(--ig-secondary-500-contrast);
  background-color: var(--ig-secondary-500);
}

API リファレンス

その他のリソース

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