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
テーマの依存関係
その他のリソース
関連トピック:
コミュニティに参加して新しいアイデアをご提案ください。