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 をインポートします。

    IgxDateRangePickerComponentIgxCalendarComponent を使用しますが、タッチ操作のために 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>
    

    ポップアップ モード

    デフォルトでは、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と同じです): igxLabeligx-hint / igxHintigx-prefix / igxPrefixigx-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 形式のいずれかを使用します。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>
    

    inputFormat プロパティが設定されていない場合、入力形式は displayFormat から数値の日付と時刻の部分のみを含む形式として解析できる場合に推測されます。

    Note

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

    フォームと検証

    Date Range Picker コンポーネントは、コア FormsModule NgModelReactiveFormsModule (FormControlFormGroup など) のすべてのフォーム ディレクティブをサポートします。これには、フォーム バリデーター機能も含まれます。さらに、コンポーネントの最小値と最大値および 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 はバリデーターです。つまり、minValuemaxValue を内部で使用して有効性を制御します。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>
    

    カレンダー ヘッダーのヘッダー、サブヘッダー、タイトル部分は、igxCalendarHeaderigxCalendarSubheaderigxCalendarHeaderTitle テンプレート ディレクティブを利用してカスタマイズできます。例:

    <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 を公開し、igxInputGroupComponentigxCalendarigxOverlay などの複数のコンポーネントおよびディレクティブを使用します。前述のコンポーネントおよびディレクティブのグローバル スタイル設定は 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 が使用されます。日付の選択は、IgxDateRangePickerComponentminValue および maxValue プロパティによって制限されます。

    API リファレンス

    テーマの依存関係

    その他のリソース

    関連トピック:

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