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

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

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

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

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

// home.component.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxMonthPickerComponent } from 'igniteui-angular/calendar';
// 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, IgxMonthPickerComponent]
    /* or imports: [BrowserAnimationsModule, IGX_CALENDAR_DIRECTIVES] */
})
export class HomeComponent {}

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

Angular Month Picker の使用

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

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

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

日付の設定

MonthPicker に日付を設定するには、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';

月ピッカーはカレンダーのテーマを使用するため、calendar-theme を拡張した新しいテーマを作成する必要があります。月ピッカーの項目にスタイルを設定するには、$content-background パラメーターを設定します。オプションで、残りのプロパティをオーバーライドする場合は、$header-background を設定することもできます。 これら 2 つのパラメーターはテーマの基礎となり、ホバー、選択、アクティブなどすべての状態に応じた適切な背景の色および前景の色を自動的に生成します。

$my-calendar-theme: calendar-theme(
  $border-radius: 15px,
  $content-background: #57a5cd,
);

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

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

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

デモ

Tailwind によるスタイル設定

カスタム Tailwind ユーティリティ クラスを使用して、month picker のスタイルを設定できます。まず Tailwind を設定してください。

グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

ユーティリティ ファイルには、light テーマと dark テーマの両方のバリエーションが含まれています。 月ピッカーはカレンダー テーマでスタイルされるため、カレンダーのユーティリティ クラスを使用する必要があります。

• light-* クラスはライト テーマ用です。
• dark-* クラスはダーク テーマ用です。
• プレフィックスの後にコンポーネント名を追加します (例: light-calendar、dark-calendar)。

これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、任意のプロパティを使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。

プロパティの完全なリストは、calendar-theme で確認できます。構文は次のとおりです:

<igx-month-picker
class="!light-calendar
![--header-background:#4F6A5A]
![--content-background:#A3C7B2]">
</igx-month-picker>

最終的に、month picker は次のようになります:

At the end your month picker should look like this:

API リファレンス

• MonthPicker
• Calendar
• IgxCalendarComponent スタイル

テーマの依存関係

• IgxCalendar テーマ
• IgxIcon テーマ

その他のリソース

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

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)