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

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

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

[!NOTE] IgrDatePicker コンポーネントは、Ignite UI for React のバージョン 18.7.0 以降の新しいコンポーネントです。このバージョンより前の古い IgrDatePicker は XDatePicker に名前が変更され、それぞれのドキュメント ページは「非推奨のコンポーネント」の下にあります。

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 スロットを使用すると、入力のメイン コンテンツの前後に異なるコンテンツを追加できます。

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

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

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

カレンダーとクリア アイコンは、calendar スロットと clear スロットを使用してテンプレート化できます。

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

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

ピッカーのアクション ボタンは、actions スロットを使用してテンプレート化できます。

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

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

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

キー	説明
←	1 文字を先頭に移動
→	1 文字を最後に移動
HOME	最初に移動
END	最後に移動
CTRL / CMD + ←	日付 / 時刻セクションの先頭に移動 - 現在のセクションまたは左側のセクション
CTRL / CMD + →	日付 / 時刻セクションの最後に移動 - 現在または右側のセクション
日付 / 時刻部分にフォーカス + ↓	日付 / 時刻部分を減少
日付 / 時刻部分にフォーカス + ↑	日付 / 時刻部分を増加
CTRL / CMD + ;	現在の日付 / 時刻をエディターの値として設定
ESC	カレンダーのポップアップを閉じて、入力フィールドにフォーカを合わせます。

例

ダイアログ モード

DatePicker は dialog モードもサポートしています。

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

表示および入力形式

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

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

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

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

増加および減少

IgrDatePicker は、stepUp メソッドと stepDown メソッドを公開します。これらは両方とも IgrDateTimeInput から取得され、現在設定されている日付の特定の 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 リファレンス

• IgrInput
• IgrCalendar
• IgrDatePicker
• スタイル設定 & テーマ

その他のリソース

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