Angular Date Range Picker (日付範囲ピッカー) コンポーネントの概要

Angular Date Range Picker は、ユーザーが開始日と終了日の値を簡単に選択できるようにするテキスト入力とカレンダー ポップアップを含む軽量のコンポーネントです。範囲制限、フォーマット、データ範囲の選択、開始値と終了値のグループ化などの機能を使用して、アプリの要件に合わせてカスタマイズできます。Angular の Date Range Picker を使用すると、開発者はデフォルトのビュー プロパティを変更して、月、年、または複数年に設定することもできます。

Angular Date Range Picker の例

コンポーネントの動作を示すために、この基本的な Angular Date Range Picker の例を作成しました。この場合、カレンダーのポップアップが表示され、ユーザーは開始日と終了日の値を選択できます。

Ignite UI for Angular Date Range Picker を使用した作業の開始

Ignite UI for Angular Date Range Picker コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

ng add igniteui-angular

Ignite UI for Angular については、「はじめに」トピックをご覧ください。

次に、app.module.ts ファイルに IgxDateRangePickerModule をインポートします。

IgxDateRangePicker は IgxCalendarComponent を使用しますが、タッチ操作のために BrowserAnimationsModule と HammerModule に依存関係があり、これらも AppModule に追加する必要があります。

// app.module.ts

import { IgxDateRangePickerModule } from 'igniteui-angular';
// import { IgxDateRangePickerModule } from '@infragistics/igniteui-angular'; for licensed package

import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
    ...
    imports: [..., IgxDateRangePickerModule, BrowserAnimationsModule, HammerModule],
    ...
})
export class AppModule {}

あるいは、16.0.0 以降、IgxDateRangePickerComponent をスタンドアロンの依存関係としてインポートすることも、IGX_DATE_RANGE_PICKER_DIRECTIVES トークンを使用してコンポーネントとそのすべてのサポート コンポーネントおよびディレクティブをインポートすることもできます。

// home.component.ts

import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IGX_DATE_RANGE_PICKER_DIRECTIVES } from 'igniteui-angular';
// import { IGX_DATE_RANGE_PICKER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: '<igx-date-range-picker [value]="range"></igx-date-range-picker>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [BrowserAnimationsModule, HammerModule, IGX_DATE_RANGE_PICKER_DIRECTIVES]
    /* or imports: [BrowserAnimationsModule, HammerModule, IgxDateRangePickerComponent] */
})
export class HomeComponent {}

Ignite UI for Angular Date Range Picker モジュールまたはディレクティブをインポートしたので、igx-date-range-picker コンポーネントの使用を開始できます。

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

Date Range Picker の表示

Date Range Picker をデフォルトのモードでインスタンス化するには、以下のコードを使用してください。

<igx-date-range-picker [value]="range"></igx-date-range-picker>

public range: DateRange = { start: new Date(2020, 4, 20), end: new Date(2020, 4, 25) };

Note

Date Range Picker の値は開始日と終了日を含む DateRange 型です。

双方向のデータバインディングを作成するには、ngModel を使用します。

<igx-date-range-picker [(ngModel)]="range"></igx-date-range-picker>

コンポーネントの投影

デフォルトの Date Range Picker UX の機能向上のため、コンポーネントは子コンポーネントの投影を許可します - IgxInputGroupComponent 、igxLabel、igx-hint / igxHint、igx-prefix / igxPrefix、igx-suffix / igxSuffix (IgxInput を除く) と同じです。詳細については、Label および Input トピックを参照してください。

さらに、Ignite UI for Angular Date Range Picker は IgxPickerToggleComponent を投影するように構成できます。IgxPickerToggleComponent は、カレンダーの切り替えを制御し、カレンダーの切り替えセクションに示すように変更できます。

<igx-date-range-picker #dateRangePicker [(ngModel)]="range">
    <label igxLabel>Flight dates</label>
    <igx-hint *ngIf="dateRangePicker.invalid">
        Please choose start and end date!
    </igx-hint>
</igx-date-range-picker>

個別の編集可能な入力の表示

Angular Date Range Picker コンポーネントは、開始日と終了日の 2 つの入力を構成できます。これは、以下のデモに示すように、IgxDateRangeStartComponent および IgxDateRangeEndComponent を日付範囲ピッカーの子として使用して実現できます。

<igx-date-range-picker [(ngModel)]="range">
    <igx-date-range-start>
        <input igxInput igxDateTimeEditor type="text">
    </igx-date-range-start>
    <igx-date-range-end>
        <input igxInput igxDateTimeEditor type="text">
    </igx-date-range-end>
</igx-date-range-picker>

• IgxDateRangeStartComponent と IgxDateRangeEndComponent は、既存の IgxInputGroupComponent を拡張します。このような構成を操作するには、IgxInput に定義する必要があります。さらに、IgxInputGroupComponent で利用可能なすべての他のコンポーネントおよびディレクティブも使用できます。
• 両方の入力で日付編集を有効にするには、igxDateTimeEditor ディレクティブでデコレートする必要があります。

ユーザー エクスペリエンス

単一の読み取り専用入力のデフォルト構成では、入力の任意の場所 (カレンダーのアイコンを含む) をクリックすると、カレンダーを開くことができます。開始日と終了日の 2 つの入力がある場合、両方の入力がデフォルトで編集可能なため、カレンダーはカレンダー アイコンからのみ開きます。

カレンダーが表示されている場合、開始日と終了日を選択して範囲を選択できます。日付を選択すると、2 番目の日付が選択されるまで開始日と終了日が設定されます。選択された範囲がある場合、カレンダーでその他の日付をクリックすると、新しい範囲選択を開始します。

コンポーネントの読み取り専用入力で表示される場合、開始日と終了日はハイフン (-) で区切られます。Start と end に異なる入力を定義する場合、to で区切ります。後者はローカライズまたはテンプレートで上書きできます。詳細については、以下のテンプレート化の例を参照してください。

コード例

ラベル

日付範囲ピッカーのラベルを定義するには、以下のスニペットに示すように igxLabel ディレクティブを使用する必要があります。

<igx-date-range-picker [(ngModel)]="range">
    <label igxLabel>Flight dates</label>
</igx-date-range-picker>

カレンダーの切り替え

単一の読み取り専用入力を使用するデフォルト構成では、デフォルトのカレンダーのアイコンがプレフィックスとして表示されます。カレンダーのアイコンは、IgxPickerToggleComponent コンポーネントを使用して変更または再定義できます。入力の開始位置または終了位置を定義する igxPrefix または igxSuffix で設定できます。デフォルトの位置を変更し、アイコンをサフィックスとして表示するには、以下を実行する必要があります。

<igx-date-range-picker>
    <igx-picker-toggle igxSuffix>
        <igx-icon>calendar_view_day</igx-icon>
    </igx-picker-toggle>
</igx-date-range-picker>

Date Range Picker に開始日と終了日の 2 つの入力がある場合、デフォルトでカレンダーアイコンを公開しません。IgxPickerToggleComponent は、IgxDateRangeStartComponent または IgxDateRangeEndComponent の子として追加する必要があります。

<igx-date-range-picker>
    <igx-date-range-start>
        ...
        <igx-picker-toggle igxPrefix>
            <igx-icon>calendar_view_day</igx-icon>
        </igx-picker-toggle>
        ...
    </igx-date-range-start>
    <igx-date-range-end>
        ...
    </igx-date-range-end>
</igx-date-range-picker>

ダイアログ モード

IgxDateRangePickerComponent コンポーネントには、ドロップダウン (デフォルト) とダイアログの 2 つのモードがあります dialog モードに切り替えるには、以下の手順を実行します。

<igx-date-range-picker [mode]="'dialog'"></igx-date-range-picker>

範囲値はカレンダーから日付が選択されるときに設定されます。ドロップダウン モードでは、Done ボタンは使用できません。

カスタム動作ボタン

Date Range Picker のアクション ボタンは、igxPickerActions ディレクティブを使用してテンプレート化できます。一般的なシナリオは、以下のデモのように、ユーザーが事前定義された範囲から選択できるようにすることです。

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

Note

ダイアログ モードのデモおよび個別の編集可能な入力の表示を使用して、以下で定義するキーボードの組み合わせをお試しください。

IgxDateRangePickerComponent カレンダー UI をキーボードで開く、または閉じる動作は、dropdown モードでのみ使用でき、以下のキーの組み合わせでトリガーできます。

• Alt + 下矢印 - カレンダー UI を含むドロップダウンを開いてフォーカスします。
• Alt + 上矢印 - ロップダウンを閉じて入力フィールド (2 つの異なる入力が使用されている場合は開始日の入力フィールド) にフォーカスします。
• Esc - ドロップダウンを閉じて入力フィールド (2 つの異なる入力が使用されている場合は開始日の入力フィールド) にフォーカスします。

Date Range Picker のカレンダー UI 内のキーボード ナビゲーションは、すべてのモードと構成で使用できます。カレンダーを開くとフォーカスが取得され、以下のキーボードの組み合わせを使用できます。

• Enter - 開始日と終了日を選択します。
• PageUp、PageDown、Shift + PageUp、Shift + PageDown、Home、End、Tab - カレンダーをナビゲートします。

カレンダーのキーボード ナビゲーションセクションには、カレンダーで使用できるすべてのキーボードの組み合わせが含まれています。

2 つの異なる入力を使用する場合、igxDateTimeEditor ディレクティブのキーボード ナビゲーションは Date Range Picker コンポーネントにも適用できます。

• Ctrl / Cmd + 左矢印 / 右矢印 -日付セクション間を移動します。Ctrl / Cmd + 右矢印でセクションの最後に移動します。既にセクションの最後にある場合、次のセクションの最後に移動します。反対方向も同様です。
• 上矢印 / 下矢印 - 日付部分を増減します。
• Ctrl / Cmd + ; - エディターに現在の日時を設定します。

書式設定

Date Range Picker コンポーネントはさまざまな表示および入力形式をサポートします。

値の表示形式には、Angular DatePipe 形式のいずれかを使用します。shortDate や longDate などの定義済みの形式オプションをサポートできます。

inputFormat プロパティは、DatePipe でサポートされる文字 (MM/dd/yyyy など) を使用して構成された書式文字列を受け入れますが、shortDate や longDate などの定義済みの形式オプションはサポートしていません。inputFormat プロパティが定義されていない場合、Angular locale ID トークンがビルド時に使用されます。

<igx-date-range-picker [(ngModel)]="range" required
    inputFormat="dd/MM/yyyy" displayFormat="shortDate">
</igx-date-range-picker>

Note

IgxDateRangePicker が IME 入力をサポートするようになりました。合成が終了すると、コントロールはワイド文字の数字を ASCII 文字に変換します。

フォームと検証

Date Range Picker コンポーネントは、コア FormsModule NgModel と ReactiveFormsModule (FormControl、FormGroup など) のすべてのフォーム ディレクティブをサポートします。これには、フォーム バリデータ機能も含まれます。さらに、コンポーネントの最小値と最大値もフォーム バリデータとして機能します。

NgModel とバリデータは、IgxDateRangePickerComponent で、または個々の開始日と終了日で設定できます。

次のスニペットと例は、テンプレート駆動型フォームで required バリデータを使用する方法を示しています。

最初に、コンポーネント レベルで実行される単一の読み取り専用範囲コンポーネントのモデルを設定する必要があります。

<igx-date-range-picker [(ngModel)]="range" required>
    <label igxLabel>Period</label>
</igx-date-range-picker>

2 つの異なる入力を設定する場合も同じ構成を使用できます。この場合、検証は両方の入力に適用されます。

<igx-date-range-picker [(ngModel)]="range" required>
    <igx-date-range-start>
        <label igxLabel>Start Date</label>
        <input igxInput igxDateTimeEditor type="text">
        <igx-picker-toggle igxPrefix>
            <igx-icon>calendar_today</igx-icon>
        </igx-picker-toggle>
    </igx-date-range-start>
    <igx-date-range-end>
        <label igxLabel>End Date</label>
        <input igxInput igxDateTimeEditor type="text">
    </igx-date-range-end>
</igx-date-range-picker>

2 つの別々の入力を使用する場合、各入力でモデルと必要なプロパティを設定できます。注: 検証は各入力に固有です。

<igx-date-range-picker>
    <igx-date-range-start>
        <input igxInput igxDateTimeEditor [(ngModel)]="range.start" type="text" required>
    </igx-date-range-start>
    <igx-date-range-end>
        <input igxInput igxDateTimeEditor [(ngModel)]="range.end" type="text" required>
    </igx-date-range-end>
</igx-date-range-picker>

最小値と最大値

minValue および maxValue プロパティを指定して、これらの値で定義された範囲外のカレンダー日付を無効にすることにより、ユーザー入力を制限できます。

public minDate = new Date(2020, 1, 15);
public maxDate = new Date(2020, 11, 1);

<igx-date-range-picker [(ngModel)]="range" required
    [minValue]="minDate" [maxValue]="maxDate">
</igx-date-range-picker>

<igx-date-range-picker [minValue]="minDate" [maxValue]="maxDate">
    <igx-date-range-start>
        <input igxInput igxDateTimeEditor [(ngModel)]="range.start" type="text" required>
    </igx-date-range-start>
    <igx-date-range-end>
        <input igxInput igxDateTimeEditor [(ngModel)]="range.end" type="text" required>
    </igx-date-range-end>
</igx-date-range-picker>

IgxDateRangePickerComponent はバリデータです。つまり、minValue と maxValue を内部で使用して有効性を制御します。ngModel で両方にアクセスすることもできます。

<igx-date-range-picker #dateRangePicker="ngModel" [(ngModel)]="range" required
    [minValue]="minDate" [maxValue]="maxDate">
    <igx-date-range-start>
        <input igxInput igxDateTimeEditor type="text">
    </igx-date-range-start>
    <igx-date-range-end>
        <input igxInput igxDateTimeEditor type="text">
    </igx-date-range-end>
</igx-date-range-picker>

<!-- minValue & maxValue will be true if the current range does not satisfy them -->
<div *ngIf="dateRangePicker.minValue || dateRangePicker.maxValue">
    <p>Value not in range.</p>
</div>

テンプレート化

2 つのエディターを使用する場合、igxDateRangeSeparator ディレクティブを使用してデフォルトのセパレーターを置き換えることができます。以下は日付のセパレーターをハイフン - に変更する方法を示します。

<igx-date-range-picker>
    <igx-date-range-start>
        <input igxInput igxDateTimeEditor [(ngModel)]="range.start" type="text" required>
    </igx-date-range-start>
    <ng-template igxDateRangeSeparator>-</ng-template>
    <igx-date-range-end>
        <input igxInput igxDateTimeEditor [(ngModel)]="range.end" type="text" required>
    </igx-date-range-end>
</igx-date-range-picker>

スタイル設定

igxDateRangePicker のスタイル設定は、すべてのテーマ関数とコンポーネントミックスインが存在する index ファイルをインポートする必要があります。

@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';

Date Range Picker コンポーネントは date-range-picker-theme を公開し、igxInputGroupComponent、igxCalendar、igxOverlay などの複数のコンポーネントおよびディレクティブを使用します。前述のコンポーネントおよびディレクティブのグローバル スタイル設定は igxDateRangeComponent に影響します。Date Range Picker コンポーネントは入力グループおよびカレンダーテーマを使用するため、calendar-theme および input-group-theme を拡張する新しいテーマを作成し、それらのパラメーターの一部と日付範囲の選択テーマを使用して日付範囲ピッカーをスタイル設定する必要があります。単一のカスタム カラー パレットを使用して、すべてのテーマで使用する色を定義します。

// COMMON
$purple: #9E379F;
$blue: #61AEDB;

$custom-palette: palette($primary: $blue, $secondary: $purple);

$today-text: color($custom-palette, "primary", 500);
$text-color: color($custom-palette, "secondary", 200);
$color-focused: color($custom-palette, "secondary", 500);

// DATE-RANGE
$custom-date-range-theme:date-range-picker-theme(
    $label-color: $color-focused
);

// INPUT GROUP
$custom-input-group-theme: input-group-theme(
  $palette: $custom-palette,
  $filled-text-color: $text-color,
  $idle-text-color: $text-color,
  $focused-text-color: $color-focused,
  $hover-bottom-line-color: $color-focused,
  $idle-bottom-line-color: $purple
);

// CALENDAR
$custom-calendar-theme: calendar-theme(
    $palette: $custom-palette,
    $date-current-text-color: $today-text,
    $border-radius: 0.5,
    $date-border-radius: 0.5
);

CSS 変数の使用

最後にカスタム テーマを渡します。

@include css-vars($custom-date-range-theme);
@include css-vars($custom-input-group-theme);
@include css-vars($custom-calendar-theme);

テーマ オーバーライドの使用

Internet Explorer 11 などの古いブラウザーのコンポーネントをスタイル設定するには、CSS 変数をサポートしていないため、別のアプローチを用いる必要があります。

コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。カスタム テーマが他のコンポーネントに影響しないようにするには、::ng-deep の前に :host セレクターを含めるようにしてください。

:host {
   ::ng-deep {
       @include date-range-picker($custom-date-range-theme);
       @include input-group($custom-input-group-theme);
       @include calendar($custom-calendar-theme);
   }
}

スタイルのスコーピング

スタイルのスコーピングについては、詳細はオーバーレイのスコープ コンポーネント スタイルおよび入力グループのスタイル スコーピングの両方のスタイル設定セクションを参照してください。

アプリケーション デモ

以下のデモは、IgxDateRangePickerComponent を使用する航空券のフォームを定義します。日付が選択されていない場合、検証エラーを表示するために IgxHint が使用されます。日付の選択は、IgxDateRangePickerComponent の minValue および maxValue プロパティによって制限されます。

API リファレンス

• IgxDateRangePickerComponent
• IgxCalendarComponent
• IgxCalendarComponent スタイル
• IgxOverlay スタイル
• IgxInputGroupComponent

テーマの依存関係

• IgxCalendar テーマ
• IgxOverlay テーマ
• IgxIcon テーマ
• IgxButton テーマ
• IgxInputGroup テーマ
• IgxDropDown テーマ

その他のリソース

関連トピック:

• Date Time Editor
• Label および Input
• リアクティブ フォームの統合
• Date Picker

コミュニティに参加して新しいアイデアをご提案ください。

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