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

Ignite UI for Angular Date Range Picker コンポーネントは開始日と終了日を定義して日付範囲を選択できる月表示カレンダーを表示します。カレンダーの UI は、ダイアログ (デフォルトの設定) または入力フィールドにあるカレンダー アイコンへのユーザー操作によってドロップダウンとして表示されます。さらに、このコンポーネントには高度なセットアップ オプションがあり、2 つの異なる編集可能な入力フィールドを公開します。コンポーネントはロケールおよびカスタム日付書式設定をサポートします。

使用方法

はじめに

Ignite UI for Date Range Picker コンポーネントを使用するには、まず IgxDateRangePickerModuleapp.module.ts ファイルにインポートします。

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

// app.module.ts

...
import { IgxDateRangePickerModule } from 'igniteui-angular';
import { HammerModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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

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) };

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

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

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

コンポーネントの投影

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

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

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

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

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>

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

単一の読み取り専用入力のデフォルト構成では、入力の任意の場所 (カレンダーのアイコンを含む) をクリックすると、カレンダーを開くことができます。開始日と終了日の 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 つのモードがあります。ドロップダウン モードに切り替えるには、以下の手順を実行します。

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

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

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

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

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

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

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

  • Enter - 開始日と終了日を選択します。
  • PageUpPageDownShift + PageUpShift + PageDownHomeEndtab - カレンダーをナビゲートします。

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

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

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

書式設定

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

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

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

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

フォームと検証

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

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

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

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

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

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

<igx-date-range-picker #dateRangePicker="ngModel" [(ngModel)]="range" required
    [minValue]="minDate" [maxValue]="maxDate">
    <igx-date-start>
        <input igxInput igxDateTimeEditor type="text">
    </igx-date-start>
    <igx-date-end>
        <input igxInput igxDateTimeEditor type="text">
    </igx-date-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 つのエディターを使用する場合、igxDateSeparator ディレクティブを使用してデフォルトのセパレーターを置き換えることができます。以下は日付のセパレーターをハイフン - に変更する方法を示します。

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

スタイル設定

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

@import '~igniteui-angular/lib/core/styles/themes/index';

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

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

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

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

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

// INPUT GROUP
$custom-input-group-theme: igx-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: igx-calendar-theme(
    $palette: $custom-palette,
    $date-current-text-color: $today-text,
    $border-radius: 0.5,
    $date-border-radius: 0.5
);

CSS 変数の使用

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

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

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

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

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

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

スタイルのスコーピング

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


アプリケーション デモ

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

API リファレンス

その他のリソース

関連トピック:

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