Angular Month Picker (月ピッカー) コンポーネントの概要

    Angular Month Picker コンポーネントは、カレンダー ビューで年や月を簡単で直感的な選択できます。このコンポーネントを使用すると、その値を日付オブジェクトにバインドでき、月ピッカー コンポーネント UI を通じて日付オブジェクトの月と年の部分を変更できます。ローカリゼーションもサポートします。

    Angular Month Picker の例

    こちらに表示されているのは、ユーザーが年と月を選択できるコンポーネントのデフォルト ビューを備えた基本的な Angular Month Picker の例です。

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

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

    ng add igniteui-angular

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

    はじめに、app.module.ts ファイルに IgxCalendarModule をインポートします。

    Note

    IgxMonthPickerComponent はタッチ操作の BrowserAnimationsModule と HammerModule (オプション) に依存関係があり、これらも AppModule に追加する必要があります。

    // app.module.ts
...
import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxCalendarModule } from 'igniteui-angular';
// import { IgxCalendarModule } from '@infragistics/igniteui-angular'; for licensed package

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

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

    // home.component.ts

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

@Component({
    selector: 'app-home',
    template: '<igx-month-picker></igx-month-picker>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [BrowserAnimationsModule, HammerModule, IgxMonthPickerComponent]
    /* or imports: [BrowserAnimationsModule, HammerModule, IGX_CALENDAR_DIRECTIVES] */
})
export class HomeComponent {}

    Ignite UI for Angular Calendar モジュールまたは Month Picker コンポーネントをインポートしたので、igx-month-picker コンポーネントの使用を開始できます。

    Note

    IgxMonthPickerComponent が日付のローカライズおよび書式設定のために Intl を使用します。 対象プラットフォームがその API をサポートしない場合、適切なポリフィルを使用してください。

    Angular Month Picker の使用

    テンプレートに Angular Month Picker を追加するには、以下のコードを使用してください。

    <!-- month-picker-sample.component.html -->

<igx-month-picker></igx-month-picker>

    日付の設定

    IgxMonthPickerComponent に日付を設定するには、value 入力を設定します。

    // month-picker-sample.component.ts

public date: Date = new Date();

    <!-- month-picker-sample.component.html -->

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

    双方向データ バインディングを作成するには、以下のように ngModel を設定します。

    <!-- month-picker-sample.component.html -->

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

    書式設定

    formatOptions 入力を使用してマンスピッカーの表示形式を変更します。

    <!-- month-picker-sample.component.html -->

<igx-month-picker [(ngModel)]="date" [formatOptions]="numericFormatOptions"></igx-month-picker>

    // month-picker-sample.component.ts

public date: Date = new Date();
public numericFormatOptions = {
    month: '2-digit'
};

    ロカリぜーション

    locale 入力を使用して、Ignite UI for Angular Month Picker ローカリゼーションをカスタマイズします。

    <!-- month-picker-sample.component.html -->

<igx-month-picker [(ngModel)]="date" [locale]="locale" [formatOptions]="formatOptions"></igx-month-picker>

    // month-picker-sample.component.ts

public date: Date = new Date();
public locale: 'fr';
public formatOptions = {
    month: 'long'
};

    Month Picker コンポーネントのローカライズとスタイル設定の例:

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

    • igxMonthPicker コンポーネントがフォーカスを持つ場合:

      • PageUp キーは前の年に移動します。
      • PageDown キーは次の年に移動します。
      • Home キーは現在の年の最初の月にフォーカスします。
      • End キーは現在の年の最初の月にフォーカスします。
      • Tab キーはサブヘッダー ボタン間を移動します。

    • サブヘッダーで < (前) または > (次) の年ボタンのフォーカス時:

      • Space または Enter キーは次または前の年のビューへスクロールします。

    • サブヘッダーの年ボタンのフォーカス時:

      • Space または Enter キーは年ビューを開きます。
      • 右矢印 または 左矢印 は前の年または次の年のビューへスクロールします。

    • 月ビュー内の月のフォーカス時:

      • 矢印キーで月を移動します。
      • Home キーは月ビューの最初の月にフォーカスします。
      • End キーは月ビューの最後の月にフォーカスします。
      • Enter キーは現在フォーカスされた月を選択してビューを閉じ
      • Tab キーは月を移動します。

    スタイル設定

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

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

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

    Month Picker はカレンダーのテーマを使用するため、calendar-theme を拡張する新しいテーマを作成し、そのパラメーターを使用して Month Picker の項目をスタイル設定します。

    $my-calendar-theme: calendar-theme(
  $border-radius: 15px,
  $content-background: #011627,
  $picker-background-color: #011627,
  $month-current-text-color: #ECAA53,
  $month-hover-background: #ECAA53,
  $year-current-text-color: #ECAA53,
  $year-hover-text-color: #D37B08,
  $picker-arrow-color: #ECAA53,
  $picker-text-hover-color: #D37B08,
  $picker-arrow-hover-color: #D37B08,
  $picker-text-color: #ECAA53
);

    テーマを含む

    次にコンポーネントのテーマをアプリケーションに含めます。

    $legacy-support が true に設定されている場合、コンポーネントのテーマを以下のように含めます。

     @include calendar($my-calendar-theme);
    Note

    コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。

    :host {
     ::ng-deep {
        @include calendar($my-calendar-theme);
    }
}

    $legacy-support が false (デフォルト) に設定されている場合、css 変数 を以下のように含めます。

    @include css-vars($my-calendar-theme);
    Note

    コンポーネントが Emulated ViewEncapsulation を使用している場合においても、変数をオーバーライドするにはグローバル セレクターが必要なため、:host を使用する必要があります。

    :host {
    @include css-vars($my-calendar-theme);
}

    すべて設定できると、結果は以下のようになります。

    デモ

    API リファレンス

    テーマの依存関係

    その他のリソース

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