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);
}
すべて設定できると、結果は以下のようになります。