Angular Date Range Picker (日付範囲ピッカー) コンポーネントの概要
Angular Date Range Picker は、テキスト入力とカレンダー ポップアップを含む軽量なコンポーネントで、ユーザーが開始日と終了日を簡単に選択できます。日付範囲の制限や設定可能な日付フォーマットなど、さまざまなアプリケーション要件に合わせて高いカスタマイズ性を提供します。
Angular Date Range Picker の例
以下は、カレンダーのポップアップを使用して開始日と終了日を選択できる IgxDateRangePickerComponent
コンポーネントのサンプルです。
Ignite UI for Angular Date Range Picker を使用した作業の開始
Ignite UI for Angular IgxDateRangePickerComponent
を使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。
ng add igniteui-angular
Ignite UI for Angular については、「はじめに」トピックををご覧ください。
次に、app.module.ts ファイルに IgxDateRangePickerModule
をインポートします。
IgxDateRangePickerComponent
は 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 をデフォルトのモードでインスタンス化するには、以下のコードを使用してください。
<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
タイプです。
ピッカーは、日付を表示するために 「シングル インプット モード」 と 「2 インプット モード」 の 2 タイプのモードを提供します。シングル インプット モードでは、フィールドは編集不可で、日付範囲を入力して変更することはできません。一方で 2 インプット モードでは、開始日と終了日を別々の入力欄に入力して編集できます。
カレンダーが表示されている場合、開始日と終了日を選択することで日付範囲を指定できます。最初の日付を選択すると、開始日と終了日の両方がその日付に設定され、次に日付を選ぶと終了日として設定されます。すでに範囲が選択されている状態で別の日付をクリックすると、新しい範囲の選択が開始されます。
双方向のデータバインディングを作成するには、ngModel
を使用します。
<igx-date-range-picker [(ngModel)]="range"></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
ディレクティブでデコレートする必要があります。
ポップアップ モード
デフォルトでは、IgxDateRangePickerComponent
をクリックすると、カレンダーのポップアップが dropdown
モードで表示されます。Mode
プロパティを dialog
に設定することで、カレンダーを dialog
モードで開くこともできます。
<igx-date-range-picker [mode]="'dialog'"></igx-date-range-picker>
シングル インプット (読み取り専用) のデフォルト構成では、インプットの任意の場所 (カレンダーのアイコンを含む) をクリックすると、カレンダーを開くことができます。開始日と終了日の 2 インプットがあり、ドロップダウン モードの場合、両方のインプットがデフォルトで編集可能なため、カレンダーはカレンダー アイコンからのみ開きます。dialog
モードで 2 インプットを行う場合、インプット内の任意の場所をクリックするとカレンダーが開きます。
範囲値はカレンダーから日付が選択されるときに設定されます。ドロップダウン モードでは、Done
ボタンは使用できません。ダイアログ モードでは、Cancel
ボタンを使用すると、閉じるときに選択を元に戻すことができます。
キーボード ナビゲーション
IgxDateRangePickerComponent
は直感的なキーボード ナビゲーションに対応しており、マウスを使わずに値の増減や入力マスクのセクション間の移動が可能です。
使用可能なキーボード ナビゲーション オプションは、コンポーネントがシングル インプット モードか 2 インプット モードかによって異なります。
2 インプット モード:
キー | 説明 |
---|---|
← | カレットを 1 文字左に移動します |
→ | カレットを 1 文字右に移動します |
Ctrl + 左矢印 | カレットを現在の入力マスク セクションの先頭、またはすでに先頭にいる場合は前のセクションの先頭に移動します |
Ctrl + 右矢印 | カレットを現在の入力マスク セクションの末尾、またはすでに末尾にいる場合は次のセクションの末尾に移動します |
上矢印 | 現在フォーカスされている入力マスクのセクションの値を 1 ステップ増加させます |
下矢印 | 現在フォーカスされている入力マスクのセクションの値を 1 ステップ減少させます |
Home | カレットを入力マスクの先頭に移動します |
End | カレットを入力マスクの末尾に移動します |
Ctrl + ; | 現在の日付をコンポーネントの値として設定します |
シングル インプットおよび 2 インプット モードの両方:
キー | 説明 |
---|---|
Alt + 下矢印 | カレンダーのドロップダウンを開きます |
Alt + 上矢印 | カレンダーのドロップダウンを閉じます |
カレンダーのキーボード ナビゲーションセクションには、カレンダーで使用できるすべてのキーボードの組み合わせが含まれています。
レイアウト
コンポーネントの投影
デフォルトの Date Range Picker UX の機能向上のため、コンポーネントは子コンポーネントの投影を許可します (IgxInputGroupComponent
と同じです): igxLabel
、igx-hint / igxHint
、igx-prefix / igxPrefix
、igx-suffix / igxSuffix
(IgxInput
を除く)。詳細については、Label および Input トピックを参照してください。
<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>
または 2 インプットの場合:
<igx-date-range-picker #dateRangePicker [(ngModel)]="range">
<igx-date-range-start>
...
<label igxLabel>Start Date</label>
<igx-hint *ngIf="dateRangePicker.invalid">
Please choose start and end date!
</igx-hint>
...
</igx-date-range-start>
<igx-date-range-end>
...
<label igxLabel>End Date</label>
...
</igx-date-range-end>
</igx-date-range-picker>
アイコンの切り替えとクリア
デフォルト設定では、シングル インプット (読み取り専用) の場合、プレフィックスにデフォルトのカレンダー アイコンが表示され、サフィックスにはクリア アイコンが表示されます。これらのアイコンは、IgxPickerToggleComponent
および IgxPickerClearComponent
を使用して変更または再定義できます。インプットの開始位置または終了位置を定義する igxPrefix
または igxSuffix
で設定できます。
<igx-date-range-picker>
<igx-picker-toggle igxSuffix>
<igx-icon>calendar_view_day</igx-icon>
</igx-picker-toggle>
<igx-picker-clear igxSuffix>
<igx-icon>clear</igx-icon>
</igx-picker-clear>
</igx-date-range-picker>
日付範囲ピッカーに開始日と終了日の 2 つの個別のインプットがある場合、デフォルトではこれらのアイコンは表示されません。IgxPickerToggleComponent
および IgxPickerClearComponent
は、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-picker-clear igxSuffix>
<igx-icon>clear</igx-icon>
</igx-picker-clear>
...
</igx-date-range-start>
<igx-date-range-end>
...
</igx-date-range-end>
</igx-date-range-picker>
カスタムおよび定義済みの日付範囲
customRanges
プロパティを使用して、範囲選択を高速化するために、カレンダー ポップアップにカスタム日付範囲チップを追加することもできます。たとえば、現在の日付を終了日とし、今後 7 日間の範囲をすぐに選択できるカスタム日付範囲チップを作成できます。さらに、usePredefinedRanges
プロパティを設定すると、カスタム チップに加えて定義済みの範囲チップも表示されます。
public today = new Date();
public nextSeven = new Date(
this.today.getFullYear(),
this.today.getMonth(),
this.today.getDate() + 7
);
public customRanges: CustomDateRange[] = [
{
label: 'Next 7 days',
dateRange: {
start: this.today,
end: this.nextSeven
}
}
];
<igx-date-range-picker [usePredefinedRanges]="true" [customRanges]="customRanges"></igx-date-range-picker>
さらに、igxPickerActions
ディレクティブを使用してカスタム コンテンツまたはアクションをテンプレート化できます。次のデモでは、テンプレート化されたアクションとともに、定義済み範囲とカスタム範囲を示します。
書式設定
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>
inputFormat
プロパティが設定されていない場合、入力形式は displayFormat
から数値の日付と時刻の部分のみを含む形式として解析できる場合に推測されます。
Note
IgxDateRangePicker
が IME 入力をサポートするようになりました。合成が終了すると、コントロールはワイド文字の数字を ASCII 文字に変換します。
フォームと検証
Date Range Picker コンポーネントは、コア FormsModule NgModel と ReactiveFormsModule (FormControl
、FormGroup
など) のすべてのフォーム ディレクティブをサポートします。これには、フォーム バリデーター機能も含まれます。さらに、コンポーネントの最小値と最大値および disabledDates はフォーム バリデーターとしても機能します。
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>
無効な日付と特別な日付
カレンダーで無効な日付を設定して、ユーザーが選択できる日付の範囲を絞り込むこともできます。無効にする日付を設定するには、disabledDates
プロパティを使用できます。
export class DateRangeSampleComponent implements OnInit {
@ViewChild('dateRange') public dateRange: IgxDateRangePicker;
public minDate = new Date(2025, 4, 1);
public maxDate = new Date(2025, 4, 31);
public ngOnInit() {
this.dateRange.disabledDates = [
{
type: DateRangeType.Between,
dateRange: [minDate, maxDate]
}
] as DateRangeDescriptor[];
}
}
DisabledDates
プロパティが提供するすべての可能性に関する詳細情報は、以下で確認できます: カレンダーの無効日。
同様に、カレンダーに 1 日または複数の日付を特別な日付として設定したい場合も可能です。この場合は SpecialDates
プロパティを使用します。特別な日付
テンプレート化
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>
カレンダー固有の設定
さまざまなプロパティを使用して、ポップアップ カレンダーをさらにカスタマイズできます。これらのプロパティがカレンダーにどのような影響を与えるかについては、IgxCalendarComponent のトピックをご覧ください。
名前 | タイプ | 説明 |
---|---|---|
orientation |
'vertical' または 'horizontal' | カレンダーを縦向きまたは横向きで表示するかを設定できます。 |
displayMonthsCount |
string | 一度に表示する月数 (1 または 2) を指定します。 |
showWeekNumbers |
string | カレンダーに週番号の列を表示するかどうかを設定します。 |
weekStart |
string | 週の最初の曜日を設定します。 |
hideOutsideDays |
boolean | 現在の月ビューの範囲外の日を非表示にします。 |
hideHeader |
boolean | カレンダー ヘッダーを非表示にします (ダイアログ モードでのみ適用されます)。 |
headerOrientation |
'vertical' または 'horizontal' | カレンダーのヘッダーを縦方向または横方向に配置します (ダイアログ モードのみ)。 |
activeDate |
Date | カレンダーで最初にハイライト表示される日付を設定します。設定されていない場合は、現在の日付がアクティブ日付になります。 |
<igx-date-range-picker [hideHeader]="true"
[orientation]="'vertical'"
[headerOrientation]="'horizontal'"
[displayMonthsCount]="1">
</igx-date-range-picker>
カレンダー ヘッダーのヘッダー、サブヘッダー、タイトル部分は、igxCalendarHeader
、igxCalendarSubheader
、igxCalendarHeaderTitle
テンプレート ディレクティブを利用してカスタマイズできます。例:
<igx-date-range-picker [value]="date">
<ng-template igxCalendarHeader let-format>
{{ format.month.combined | titlecase }}{{format.day.combined }}{{ format.weekday.combined }}
</ng-template>
<ng-template igxCalendarSubheader let-format>
<span (click)="format.yearView()">{{ format.year.combined }}</span>
<span (click)="format.monthView()">{{ format.month.combined | titlecase }}</span>
</ng-template>
<ng-template igxCalendarHeaderTitle let-format>
<span>My calendar</span>
</ng-template>
</igx-date--range-picker>
スタイル設定
igxDateRangePicker
のスタイル設定は、すべてのテーマ関数とコンポーネントミックスインが存在する index
ファイルをインポートする必要があります。
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @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;
$light-gray: #efefef;
$custom-palette: palette(
$primary: $blue,
$secondary: $purple,
$surface: $light-gray
);
$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(
$filled-text-color: $text-color,
$idle-text-color: $text-color,
$focused-text-color: $color-focused,
$idle-bottom-line-color: $purple,
$hover-bottom-line-color: $color-focused,
$interim-bottom-line-color: $color-focused
);
// CALENDAR
$custom-calendar-theme: calendar-theme(
$date-current-foreground: $today-text,
$border-radius: 0.5,
$date-border-radius: 0.5
);
最後にカスタム テーマを渡します。
@include css-vars($custom-date-range-theme);
@include css-vars($custom-input-group-theme);
@include css-vars($custom-calendar-theme);
Warning
コンポーネントが Emulated
ViewEncapsulation を使用している場合、::ng-deep
を使用してこのカプセル化を解除する必要があります。
: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
テーマの依存関係
その他のリソース
関連トピック:
コミュニティに参加して新しいアイデアをご提案ください。