Month Picker

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

Month Picker デモ

Ignite UI for Angular コンポーネント、をプロジェクトに追加する前に、必要なすべての依存関係を構成し、プロジェクトのセットアップが正しく完了したことを確認してください。インストールのトピックで手順を確認できます。

使用方法

Ignite UI for Angular Month Picker を初期化する前に、IgxCalendarModule をアプリケーションの AppModule (app.module.ts ファイル) にインポートします。注: IgxCalendarIgxCalendar の依存関係があるため、AppModule にも追加する必要があります。

// app.module.ts
...
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxCalendarModule } from 'igniteui-angular';
@NgModule({
    ...
    imports: [..., BrowserAnimationsModule, IgxCalendarModule],
    ...
})
export class AppModule {}

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

import { IgxMonthPickerComponent } from "igniteui-angular";
...

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

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

マンスピッカーの追加は、以下のコードを使用してください。

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

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

日付の設定

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

// month-picker-sample.component.ts

public date: Date = new Date(Date.now());
<!-- month-picker-sample.component.html -->

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

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

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

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

書式設定

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

<!-- 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(Date.now());
public numericFormatOptions = {
        month: "2-digit",
        year: "numeric"
};

以下は、マンスピッカーのデフォルトの書式オプションを変更する例です。

ローカライズ

locale 入力を使用してマンスピッカーのローカライズをカスタマイズします。

<!-- 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(Date.now());
public locale: "fr";
public formatOptions = {
        month: "long",
        year: "numeric"
};

マンスピッカー コンポーネントのローカライズの例:

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

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

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

    • Space または Enter キーは次または前の年のビューへスクロールします。
  • サブヘッダーの年ボタンのフォーカス時:

    • Space または Enter キーは年ビューを開きます。
    • Right または Left は前の年または次の年のビューへスクロールします。
  • 月ビュー内の月のフォーカス時:

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

API リファレンス

その他のリソース

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