Angular Month Picker (月ピッカー) の概要

    Angular Month Picker コンポーネントは、カレンダー ビューで年や月を簡単で直感的な選択できます。コンポーネントは、単一選択、表示形式のカスタマイズ、ローカライゼーションをサポートします。

    一般に、Angular Material Month Picker は、日付を選択するための 2 つの基本的な方法を提供します - カレンダーのポップアップから、またはテキスト入力で日付を入力することです。Angular Month Picker の主な機能の 1 つは、検証、カスタムの日付形式、範囲制限、日付の無効化などです。

    Angular Month Picker の例

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

    Ignite UI で Angular Month Picker コンポーネントを使用する方法

    はじめに、app.module.ts ファイルに IgxCalendarModule をインポートします。注: タッチ操作のために、IgxCalendar は 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 {}

    カレンダー API の型を宣言する前に IgxMonthPickerComponent を AppComponent ファイルにインポートします。エディターが自動的にインポートすることが可能です。

    import { IgxMonthPickerComponent } from 'igniteui-angular';
// import { IgxMonthPickerComponent } from '@infragistics/igniteui-angular'; for licensed package
...

@ViewChild('monthPicker', { read: IgxMonthPickerComponent }) public monthPicker: IgxMonthPickerComponent;
    Note

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

    テンプレートに 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 リファレンス

    テーマの依存関係

    その他のリソース

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