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 モード、ロケール対応でカスタマイズ可能な日付の書式設定と検証の統合もサポートしています。

Web Components Date Picker の例

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

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

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

npm install igniteui-webcomponents

次に、以下のように、DatePicker とそれに必要な 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 状態の DatePicker をインスタンス化するには、以下のコードを使用してください。

<igc-date-picker>
    <span slot="helper-text">Date</span>
</igc-date-picker>

オプション

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

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

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

<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 スロットを使用してテンプレート化できます。最良の結果を得るには、actions スロットにコンテンツを追加する際に <igc-button> コンポーネントを使用することをお勧めします。

<igc-date-picker id="DatePicker">
    <igc-button slot="actions" onclick="DatePicker.showWeekNumbers = true">Show Week Numbers</igc-button>
</igc-date-picker>

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

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

例

ダイアログ モード

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 として使用します。

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

増加および減少

DatePicker は、StepUp メソッドと StepDown メソッドを公開します。これらは両方とも IgcDateTimeInput から取得され、現在設定されている日付の特定の 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>

フォーム

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

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

カレンダー固有の設定

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

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

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

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

<igc-date-picker locale="ja-JP">
</igc-date-picker>

スタイル設定

DatePicker コンポーネントは Input コンポーネントおよび Calendar コンポーネントから派生するため、使用可能なすべての 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 Web Components フォーラム (英語)
• Ignite UI for Web Components GitHub (英語)