Month Picker

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

Angular Month Picker の例

このサンプルが気に入りましたか? 完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

codesandbox で表示 Stackblitz で表示

使用方法

はじめに、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';
@NgModule({
    ...
    imports: [..., BrowserAnimationsModule, HammerModule, IgxCalendarModule],
    ...
})
export class AppModule {}

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

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

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

Note

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();

<!-- 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 入力を使用してマンスピッカーのローカライズをカスタマイズします。

<!-- 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 コンポーネントのローカライズとスタイル設定の例:

codesandbox で表示 Stackblitz で表示

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

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

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

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

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

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

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

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

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

スタイル設定

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

@import '~igniteui-angular/lib/core/styles/themes/index';

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

$my-calendar-theme: igx-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 igx-calendar($my-calendar-theme);

Note

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

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

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

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

Note

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

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

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

デモ

codesandbox で表示 Stackblitz で表示

API リファレンス

• IgxMonthPickerComponent
• IgxCalendarComponent
• IgxCalendarComponent スタイル

その他のリソース

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

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