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

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

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

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

Blazor Date Picker の例

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

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

IgbDatePicker コンポーネントの使用を開始するには、最初にそのモジュールを登録する必要があります。

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbDatePickerModule));

スタイルを IgbDatePicker コンポーネントに適用するには、追加の CSS ファイルをリンクする必要もあります。以下は、Blazor WebAssembly プロジェクトの wwwroot/index.html ファイルまたは Blazor Server プロジェクトの Pages/_Host.cshtml ファイルに配置する必要があります:

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

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

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

日付ピッカーの表示

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

<IgbDatePicker @ref="DatePicker"></IgbDatePicker>

オプション

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

<IgbDatePicker @ref="DatePicker" Value="@SelectedDate">
</IgbDatePicker>

@code {

    public DateTime SelectedDate { get; set; }
    public IgbDatePicker DatePicker { get; set; }

    protected override void OnInitialized()
    {
        this.SelectedDate = DateTime.Today;
    }
}

コンポーネントの投影

prefix スロットと suffix スロットを使用すると、入力のメイン コンテンツの前後に異なるコンテンツを追加できます。

<IgbDatePicker @ref="DatePicker">
    <IgbIcon 
        Slot="suffix" 
        IconName="arrow_upward" 
        Collection="bootstrap" 
        Class="small" 
        @onclick="() => DatePicker.StepUp(DatePart.Month)">
    </IgbIcon>
</IgbDatePicker>

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

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

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

<IgbDatePicker>
    <IgbIcon Slot="calendar" IconName="calendar" Collection="material" Class="small"></IgbIcon>
    <IgbIcon Slot="clear" IconName="delete" Collection="material" Class="small"></IgbIcon>
</IgbDatePicker>

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

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

<IgbDatePicker>
    <IgbButton Slot="actions" @onclick="() => DatePicker.ShowWeekNumbers = true">Show Week Numbers</IgbButton>
</IgbDatePicker>

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

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

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

例

ダイアログ モード

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

<IgbDatePicker Mode="PickerMode.Dialog"></IgbDatePicker>

表示および入力形式

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

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

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

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

増加および減少

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

<IgbDatePicker @ref="DatePicker">
    <IgbIcon 
        Slot="prefix"
        IconName="arrow_upward"
        Collection="material"               
        @onclick="() => DatePicker.StepUp(DatePart.Month)">
    </IgbIcon>
    <IgbIcon 
        Slot="suffix"
        IconName="arrow_downward"
        Collection="material"
        @onclick="() => DatePicker.StepDown(DatePart.Month)">
    </IgbIcon>
</IgbDatePicker>

フォーム

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

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

カレンダー固有の設定

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

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

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

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

<IgbDatePicker Locale="ja-JP"></IgbDatePicker>

スタイル設定

IgbDatePicker コンポーネントは IgbInput コンポーネントおよび IgbCalendar コンポーネントから派生するため、使用可能なすべての 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 リファレンス

• IgbInput
• IgbCalendar
• IgbDatePicker
• スタイル設定 & テーマ

その他のリソース

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