Blazor Date Range Picker (日付範囲ピッカー) の概要

Ignite UI for Blazor Date Range Picker は、テキスト入力とカレンダー ポップアップを含む軽量なコンポーネントで、ユーザーが開始日と終了日を簡単に選択できます。日付範囲の制限や設定可能な日付フォーマットなど、さまざまなアプリケーション要件に合わせて高いカスタマイズ性を提供します。

Date Range Picker の例

以下は、カレンダーのポップアップを使用して開始日と終了日を選択できる IgbDateRangePicker コンポーネントのサンプルです。

作業の開始

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

// in Program.cs file

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

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

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

これで、Blazor IgbDateRangePicker の基本構成から始めることができます。

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

使用方法

IgbDateRangePicker では、ドロップダウンやカレンダーのポップアップから日付範囲を選択するか、開始日と終了日それぞれの入力フィールドに直接入力することで、日付範囲を指定できます。

ピッカーは、日付を表示するために 「シングル インプット モード」 と 「2 インプット モード」 の 2 タイプのモードを提供します。シングル インプット モードでは、フィールドは編集不可で、日付範囲を入力して変更することはできません。一方で 2 インプット モードでは、開始日と終了日を別々の入力欄に入力して編集できます。

カレンダーが表示されている場合、開始日と終了日を選択することで日付範囲を指定できます。最初の日付を選択すると、開始日と終了日の両方がその日付に設定され、次に日付を選ぶと終了日として設定されます。すでに範囲が選択されている状態で別の日付をクリックすると、新しい範囲の選択が開始されます。

Date Range Picker の表示

デフォルトのシングル インプット モードで IgbDateRangePicker をインスタンス化するには、次のコードを使用します:

<IgbDateRangePicker @ref="DateRangePicker"></IgbDateRangePicker>

IgbDateRangePicker を 2 つの入力欄を使用するように切り替えるには、UseTwoInputs プロパティを true に設定します。

<IgbDateRangePicker UseTwoInputs="true"></IgbDateRangePicker>

Value (値)

ユーザーによる選択または入力に加えて、IgbDateRangePicker の範囲値は Value プロパティを使用して設定することもできます。値は次の形式に従う必要があります: { start: startDate, end: endDate }、ここで startDate と endDate は選択された範囲を表す Date オブジェクトです。

 <IgbDateRangePicker @ref="DateRangePicker" Value="@Range" Label="Date Range"/>

 @code {
    public IgbDateRangePicker DateRangePicker { get; set; }

    public IgbDateRangeValue Range = new IgbDateRangeValue()
    {
        Start = DateTime.Today,
        End = DateTime.Today.AddDays(3)
    };
}

Read-only (読み取り専用) および Non-editable (編集不可)

IgbDateRangePicker を読み取り専用に設定すると、入力やカレンダーでの範囲変更が無効になり、キーボード ナビゲーションも無効になります。また、カレンダーやクリア アイコンも視覚的に無効状態になります。これは、value 属性で範囲を設定し、それを表示専用にしたい場合に便利です。この動作を有効にするには、ReadOnly プロパティを設定するだけです。

 <IgbDateRangePicker UseTwoInputs="true" ReadOnly="true"/>

あるいは、NonEditable プロパティを使用することもできます。これは ReadOnly とは異なり、入力欄のタイピングによる編集のみを禁止し、カレンダーからの選択やクリア アイコンでのリセットは可能です。

 <IgbDateRangePicker UseTwoInputs="true" NonEditable="true"/>

ポップアップ モード

デフォルトでは、IgbDateRangePicker をクリックすると、カレンダーのポップアップが dropdown モードで表示されます。Mode プロパティを dialog に設定することで、カレンダーを dialog モードで開くこともできます。

 <IgbDateRangePicker Mode="PickerMode.Dialog"/>

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

IgbDateRangePicker は直感的なキーボード ナビゲーションに対応しており、マウスを使わずに値の増減や入力マスクのセクション間の移動が可能です。

使用可能なキーボード ナビゲーション オプションは、コンポーネントがシングル インプット モードか 2 インプット モードかによって異なります。

2 インプット モード:

シングル インプットおよび 2 インプット モードの両方:

キーボードを使用してカレンダー ポップアップ内を移動することもできます。ナビゲーションは IgbCalendar コンポーネントと同じです。

レイアウト

Label (ラベル)

シングル インプット モードの場合、Label プロパティを使用して IgbDateRangePicker コンポーネントにラベルを設定できます。2 インプット モードでは、LabelStart および LabelEnd プロパティを使用して、それぞれ開始日および終了日の入力フィールドにラベルを設定できます。

 <IgbDateRangePicker Label="Date Range"/>

 <IgbDateRangePicker UseTwoInputs="true" LabelStart="Start Date" LabelEnd="End Date"/>

Format (形式)

入力フィールドに表示される日付形式をカスタマイズすることも可能です。この目的のために使用できるプロパティは、Locale、InputFormat、および DisplayFormat の 3 つです。

Locale プロパティでは、使用するロケール識別子を指定でき、地域の慣習に基づいて日付の表示形式が決定されます。 たとえば、日付を日本形式で表示したい場合、locale プロパティを次のように設定します:

 <IgbDateRangePicker Locale="ja-JP"/>

日付形式を手動で定義したい場合は、カスタム形式の文字列を渡して InputFormat プロパティを使用できます。

 <IgbDateRangePicker InputFormat="dd/MM/yy"/>

DisplayFormat プロパティはカスタム形式文字列も受け入れますが、入力フィールドがアイドル状態 (つまり、フォーカスされていない状態) の場合にのみ適用されます。フィールドにフォーカスがある場合、形式はデフォルト、または InputFormat で定義された形式に戻ります (両方のプロパティが使用されている場合)。

 <IgbDateRangePicker InputFormat="dd/MM/yy" DisplayFormat='yy/MM/dd'/>

カレンダーのレイアウトと形式

さまざまなプロパティを使用して、ポップアップ カレンダーをさらにカスタマイズできます。

 <IgbDateRangePicker Orientation="ContentOrientation.Vertical" VisibleMonths="1" ShowWeekNumbers="true"/>

Min (最小値) および Max (最大値)

Min および Max プロパティを使用して、定義した範囲外の日付を無効にすることで、ユーザーの入力を制限することもできます。これらのプロパティはバリデーターとして機能するため、範囲外の日付が手動で入力された場合でも、IgbDateRangePicker.Min は無効になります。

 <IgbDateRangePicker Min="@MinDate" Max="@MaxDate"/>

 @code {
    public DateTime MinDate = new DateTime(DateTime.Today.Year, DateTime.Today.Month, 1);
    public DateTime MaxDate = new DateTime(DateTime.Today.Year, DateTime.Today.Month, 30);
 }

カスタムおよび定義済みの日付範囲

CustomRanges プロパティを使用して、範囲選択を高速化するために、カレンダー ポップアップにカスタム日付範囲チップを追加することもできます。たとえば、現在の日付を終了日とし、今後 7 日間の範囲をすぐに選択できるカスタム日付範囲チップを作成できます。さらに、UsePredefinedRanges プロパティを設定すると、カスタム チップに加えて定義済みの範囲チップも表示されます。

<IgbDateRangePicker CustomRanges="@CustomRanges" UsePredefinedRanges="true" Label="Custom Ranges" />

@code {
    public IgbCustomDateRange[] CustomRanges = [
            new IgbCustomDateRange()
            {
                Label = "Previous 7 Days",
                DateRange = new IgbDateRangeValue()
                {
                    Start = DateTime.Today.AddDays(-7),
                    End = DateTime.Today
                }
            },
            new IgbCustomDateRange()
            {
                Label = "Next 7 Days",
                DateRange = new IgbDateRangeValue()
                {
                    Start = DateTime.Today,
                    End = DateTime.Today.AddDays(7)
                }
            }
    ];
}

これで、カレンダーのポップアップ内に表示された 「次の 7 日間」 チップをクリックすると、本日から次の 7 日間までの範囲が自動的に選択されます。

無効日と特別な日

カレンダーで無効な日付を設定して、ユーザーが選択できる日付の範囲を絞り込むこともできます。無効にする日付を設定するには、DisabledDates プロパティを使用できます。

<IgbDateRangePicker DisabledDates="@DisabledDates" />

@code {
    public IgbDateRangeDescriptor[] DisabledDates = [
        new IgbDateRangeDescriptor
    {
        RangeType = DateRangeType.Between,
        DateRange = new DateTime[] { new DateTime(DateTime.Today.Year, DateTime.Today.Month, 5), new DateTime(DateTime.Today.Year, DateTime.Today.Month, 8) },
    }];
}

DisabledDates プロパティが提供するすべての可能性に関する詳細情報は、以下で確認できます: 無効日

同様に、カレンダーに 1 日または複数の日付を特別な日として設定したい場合も可能です。この場合は SpecialDates プロパティを使用します。(特別な日)

フォーム

IgbDateRangePicker コンポーネントは、HTML フォーム要素とシームレスに使用することもできます。Min、Max、Required プロパティはフォーム検証子として機能します。

追加構成

プロパティ

すでに紹介したプロパティに加えて、IgbDateRangePicker コンポーネントには動作をさらに細かく設定できるさまざまなプロパティが用意されています。

スロット

IgbDateRangePicker コンポーネントでは、利用可能なスロットを使用して、カスタム コンテンツを追加したり、外観を変更したりすることも可能です。

シングル インプット モードでは、prefix および suffix スロットを使って、入力フィールドの前後にカスタム コンテンツを挿入できます。

<IgbDateRangePicker>
    <IgbIcon @ref="DropDownIcon" slot="prefix" IconName="dropdown" Collection="material"></IgbIcon>
    <IgbIcon @ref="UploadIcon" slot="suffix" IconName="upload" Collection="material"></IgbIcon>
</IgbDateRangePicker>

2 インプット モードでは、prefix-start、prefix-end、suffix-start、suffix-end スロットを使用して、それぞれの入力に対してカスタム コンテンツを追加できます。

clear-icon および calendar-icon スロットを使用すると、入力欄内のクリア ボタンとカレンダー ボタンのアイコンをカスタマイズできます。

<IgbDateRangePicker>
    <IgbIcon slot="clear-icon" @ref="ClearIcon" IconName="bin" Collection="material"></IgbIcon>
    <IgbIcon slot="calendar-icon" @ref="CalendarIcon" IconName="apps" Collection="material"></IgbIcon>
</IgbDateRangePicker>

2 インプット モードでは、separator スロットを使用して、開始日と終了日の入力欄の間に表示されるデフォルトの「～」テキストをカスタマイズできます。

<IgbDateRangePicker UseTwoInputs="true">
  <span slot="separator">till</span>
</IgbDateRangePicker>

actions スロットを使用すると、独自のロジックを持つカスタム アクション ボタンを挿入できます。たとえば、以下のボタンはカレンダーの週番号の列を切り替えます。

<IgbDateRangePicker Mode="PickerMode.Dialog" @ref="ActionsDateRange">
    <IgbButton slot="actions" @onclick="() => ActionsDateRange.ShowWeekNumbers = !ActionsDateRange.ShowWeekNumbers">Toggle week numbers</IgbButton>
</IgbDateRangePicker>

これまでに説明したスロットに加えて、IgbDateRangePicker コンポーネントでは次のスロットも使用できます。

メソッド

IgbDateRangePicker は、プロパティやスロットに加えて、次のメソッドも公開しています:

スタイル設定

IgbDateRangePicker コンポーネントは IgbCalendar コンポーネントを使用しているため、Calendar の CSS パーツも継承されており、両コンポーネントをシームレスにスタイル設定できます。Calendar コンポーネントで使用可能なすべての CSS パーツの一覧はこちらをご覧ください: カレンダーのスタイル設定。Calendar の CSS パーツに加えて、IgbDateRangePicker は以下のような独自の CSS パーツも提供しており、外観をさらにカスタマイズできます:

igc-date-range-picker::part(label) {
  color: var(--ig-gray-600);
}

igc-date-range-picker::part(calendar-icon-start),
igc-date-range-picker::part(calendar-icon-end) {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
}

igc-date-range-picker::part(calendar-icon-open-start),
igc-date-range-picker::part(calendar-icon-open-end) {
  background-color: var(--ig-primary-700);
  color: var(--ig-primary-700-contrast);
}

igc-date-range-picker::part(clear-icon-start),
igc-date-range-picker::part(clear-icon-end) {
  background-color: var(--ig-error-500);
  color: var(--ig-error-500-contrast);
}

API リファレンス

その他のリソース

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