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 をインポートします。注: タッチ操作のために、IgxCalendarBrowserAnimationsModuleHammerModule に依存関係があり、これらも 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-supporttrue に設定されている場合、コンポーネントのテーマを以下のように含めます。

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

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

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

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

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

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

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

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

    デモ

    API リファレンス

    テーマの依存関係

    その他のリソース

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