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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

例

ダイアログ モード

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

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

表示および入力形式

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

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

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

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

増加および減少

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

その他のリソース

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