Web Components Date Picker (日付ピッカー) コンポーネントの概要
Ignite UI for Web Components Date Picker は、手動でテキストを入力して日付を入力するか、ポップアップするカレンダー ダイアログから日付値を選択するために使用される機能豊富なコンポーネントです。軽量で使いやすい Date Picker を使用すると、ユーザーは、月、年、10 年の複数の表示オプションを使用して目的の日付に移動できます。また、最小および最大の日付制約や必須フィールドなどの一般的な検証プロパティもサポートしています。
Ignite UI for Web Components Date Picker コンポーネントを使用すると、ユーザーは月表示のカレンダード ロップダウンまたは編集可能な入力フィールドから単一の日付を選択できます。Web Components Date Picker は、カレンダーからのみ選択するための dialog モード、ロケール対応でカスタマイズ可能な日付の書式設定と検証の統合もサポートしています。
[!NOTE]
IgcDatePickerComponentコンポーネントは、Ignite UI for Web Components のバージョン 5.0.0 以降の新しいコンポーネントです。このバージョンより前の古いIgcDatePickerComponentはXDatePickerに名前が変更され、それぞれのドキュメント ページは「非推奨のコンポーネント」の下にあります。
Web Components Date Picker の例
以下は、ユーザーが手動のテキスト入力で日付を選択し、左側のカレンダー アイコンをクリックしてナビゲートできるようになったときに、Date Picker がどのように機能するかを示すサンプルです。描画する方法は以下のとおりです。
Web Components Date Picker を使用した作業の開始
まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります:
npm install igniteui-webcomponents
次に、以下のように、IgcDatePickerComponent とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:
import { defineComponents, IgcDatePickerComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
defineComponents(IgcDatePickerComponent);
Ignite UI for Web Components の完全な概要については、作業の開始トピックを参照してください。
Web Components Date Picker コンポーネントの使用
日付ピッカーの表示
デフォルトの dropdown 状態の IgcDatePickerComponent をインスタンス化するには、以下のコードを使用してください。
<igc-date-picker>
<p slot="helper-text">Date</p>
</igc-date-picker>
オプション
IgcDatePickerComponent は date または string にバインドできます。
const DatePicker = document.querySelector('igc-date-picker') as IgcDatePickerComponent;
const date = new Date();
DatePicker.value = date;
文字列がピッカーにバインドされている場合は、ISO 8601 形式の文字列である必要があります。
<igc-date-picker value="2000-01-01"></igc-date-picker>
コンポーネントの投影
prefix スロットと suffix スロットを使用すると、入力のメイン コンテンツの前後に異なるコンテンツを追加できます。
<igc-date-picker id="DatePicker">
<igc-icon slot="suffix" name="arrow_upward" collection="material" class="small" onclick="DatePicker.stepUp()"></igc-icon>
</igc-date-picker>
上記のスニペットでは、入力の最後、デフォルトのクリア アイコンの直後に追加のアイコンが追加されます。プレフィックスとサフィックスを次々に積み重ねることができるため、これによってデフォルトのトグル アイコンが削除されることはありません。
トグル アイコンとクリア アイコンのカスタマイズ
カレンダーとクリア アイコンは、calendar スロットと clear スロットを使用してテンプレート化できます。
<igc-date-picker id="DatePicker">
<igc-icon slot="calendar" name="calendar" collection="material" class="small"></igc-icon>
<igc-icon slot="clear" name="delete" collection="material" class="small"></igc-icon>
</igc-date-picker>
カスタム アクション ボタン
ピッカーのアクション ボタンは、actions スロットを使用してテンプレート化できます。
<igc-date-picker id="DatePicker">
<igc-button slot="actions" onclick="DatePicker.showWeekNumbers = true">Show Week Numbers</igc-button>
</igc-date-picker>
キーボード ナビゲーション
IgcDatePickerComponent には直感的なキーボード ナビゲーションがあり、マウスに触れることなく、さまざまな DatePart を簡単に増分、減分、またはジャンプできます。
| キー | 説明 |
|---|---|
| ← | 1 文字を先頭に移動 |
| → | 1 文字を最後に移動 |
| Home | 最初に移動 |
| End | 最後に移動 |
| Ctrl / Command + ← | 日付 / 時刻セクションの先頭に移動 - 現在のセクションまたは左側のセクション |
| Ctrl / Command + → | 日付 / 時刻セクションの最後に移動 - 現在または右側のセクション |
| 日付 / 時刻部分にフォーカス + ↓ | 日付 / 時刻部分を減少 |
| 日付 / 時刻部分にフォーカス + ↑ | 日付 / 時刻部分を増加 |
| Ctrl / Command + ; | 現在の日付 / 時刻をエディターの値として設定 |
| Esc | カレンダーのポップアップを閉じて、入力フィールドにフォーカを合わせます。 |
例
ダイアログ モード
DatePicker は dialog モードもサポートしています。
<igc-date-picker id="DatePicker" mode="dialog">
</igc-date-picker>
表示および入力形式
inputFormat および displayFormat は、ピッカーのエディターが指定された形式に従うように設定できるプロパティです。inputFormat はロケール ベースであるため、何も指定されていない場合、ピッカーはデフォルトでブラウザーで使用されるものになります。
注意すべき点は、Date Picker コンポーネントが date と month の部分がない形式で提供された場合、それらの部分に常に先行ゼロを追加することです。 例えば、d/M/yy は dd/MM/yy になります。これは編集中にのみ適用されます。
displayFormat は、フォーカスされていないときにピッカーの入力を書式設定するために使用されます。displayFormat が指定されていない場合、ピッカーは inputFormat を displayFormat として使用します。
詳細については、IgcDateTimeInputComponent 形式のセクションを参照してください。
増加および減少
IgcDatePickerComponent は、stepUp メソッドと stepDown メソッドを公開します。これらは両方とも IgcDateTimeInputComponent から取得され、現在設定されている日付の特定の DatePart を増加および減少するために使用できます。
<igc-date-picker id="DatePicker">
<igc-icon slot="prefix" name="arrow_upward" collection="material" onclick="DatePicker.stepUp()"></igc-icon>
<igc-icon slot="suffix" name="arrow_downward" collection="material" onclick="DatePicker.stepDown()"></igc-icon>
</igc-date-picker>
フォーム
IgcDatePickerComponent はフォーム要素で使用できます。コンポーネントの min プロパティと max プロパティはフォーム検証機能として機能します。
フォームでは、コンポーネントの igcChange イベントを処理し、ラベルの値を更新できます。
カレンダー固有の設定
IgcDatePickerComponent は、Date Picker が公開するプロパティを通じて、カレンダーの設定の一部を変更できます。これらの一部には、ピッカーが展開されたときに複数のカレンダーを表示できる visibleMonths、週の開始日を決定する weekStart、年の各週の番号を表示する showWeekNumbers などが含まれます。
インターナショナリゼーション
IgcDatePickerComponent のローカライズは、locale 入力で制御できます。
以下は日本ロケール定義を持つ IgcDatePickerComponent です。
<igc-date-picker locale="ja-JP">
</igc-date-picker>
スタイル設定
IgcDatePickerComponent コンポーネントは IgcInputComponent コンポーネントおよび IgcCalendarComponent コンポーネントから派生するため、使用可能なすべての CSS パーツを公開します。詳細については、Input のスタイル設定と Calendar のスタイル設定を参照してください。