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

Angular Month Picker コンポーネントは、カレンダー ビューで年や月を簡単で直感的な選択できます。このコンポーネントを使用すると、その値を日付オブジェクトにバインドでき、月ピッカー コンポーネント UI を通じて日付オブジェクトの月と年の部分を変更できます。ローカリゼーションもサポートします。

Angular Month Picker の例

こちらに表示されているのは、ユーザーが年と月を選択できるコンポーネントのデフォルト ビューを備えた基本的な Angular Month Picker の例です。

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxCalendarModule,
	IgxCardModule
 } from "igniteui-angular";
import { MonthpickerSample1Component } from "./monthpicker-sample-1/monthpicker-sample-1.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	MonthpickerSample1Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxCalendarModule,
	IgxCardModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from '@angular/core';

@Component({
    selector: 'app-monthpicker-sample-1',
    styleUrls: ['./monthpicker-sample-1.component.scss'],
    templateUrl: './monthpicker-sample-1.component.html'
})
export class MonthpickerSample1Component {
    public date = new Date();
}
tsコピー

<div>
    <igx-card>
        <igx-month-picker #monthPicker [value]="date"></igx-month-picker>
    </igx-card>
</div>
htmlコピー

igx-card {
    max-width: 400px;
    margin: 20px;
}
scssコピー

Edit in: CodesandboxStackBlitz

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

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

Ignite UI for Angular Month Picker を使用した作業の開始

Ignite UI for Angular Month Picker コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

ng add igniteui-angular
cmd

Ignite UI for Angular については、「はじめに」トピックをご覧ください。

はじめに、app.module.ts ファイルに IgxCalendarModule をインポートします。

IgxMonthPickerComponent はタッチ操作の 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 {}
typescript

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

// home.component.ts

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

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

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

Angular Month Picker の使用

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

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

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

日付の設定

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

// month-picker-sample.component.ts

public date: Date = new Date();
typescript

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

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

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

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

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

書式設定

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

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

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

// month-picker-sample.component.ts

public date: Date = new Date();
public numericFormatOptions = {
    month: '2-digit'
};
typescript

ロカリぜーション

locale 入力を使用して、Ignite UI for Angular Month Picker ローカリゼーションをカスタマイズします。

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

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

// month-picker-sample.component.ts

public date: Date = new Date();
public locale: 'fr';
public formatOptions = {
    month: 'long'
};
typescript

Month Picker コンポーネントのローカライズとスタイル設定の例:

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxCalendarModule,
	IgxSelectModule,
	IgxCardModule,
	IgxInputGroupModule
 } from "igniteui-angular";
import { MonthpickerSample3Component } from "./monthpicker-sample-3/monthpicker-sample-3.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	MonthpickerSample3Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxCalendarModule,
	IgxSelectModule,
	IgxCardModule,
	IgxInputGroupModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { registerLocaleData } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { IFormattingOptions } from 'igniteui-angular';
import localeDE from '@angular/common/locales/de';
import localeFR from '@angular/common/locales/fr';
import localeAR from '@angular/common/locales/ar';
import localeZH from '@angular/common/locales/zh';

@Component({
    selector: 'app-monthpicker-sample-3',
    styleUrls: ['./monthpicker-sample-3.component.scss'],
    templateUrl: './monthpicker-sample-3.component.html'
})
export class MonthpickerSample3Component implements OnInit {
    public formatOptions: IFormattingOptions = {
        month: 'long'
    };

    public date = new Date();
    public locales = ['en', 'de', 'fr', 'ar', 'zh'];
    public locale = 'en';

    public ngOnInit(): void {
        registerLocaleData(localeDE);
        registerLocaleData(localeFR);
        registerLocaleData(localeAR);
        registerLocaleData(localeZH);
    }
}
tsコピー

<div class="sample-column card-wrapper">
    <div>
        <igx-select #select [(ngModel)]="locale">
            <igx-prefix>Locales: </igx-prefix>
            <igx-select-item *ngFor="let locale of locales" [value]="locale">
                {{ locale }}
            </igx-select-item>
        </igx-select>
    </div>

    <igx-card>
        <igx-month-picker #monthPicker [(ngModel)]="date" [locale]="locale" [formatOptions]="formatOptions">
        </igx-month-picker>
    </igx-card>
</div>
htmlコピー

.card-wrapper {
    max-width: 400px;
}
scssコピー

Edit in: CodesandboxStackBlitz

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

• 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';
scss

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

$my-calendar-theme: calendar-theme(
  $border-radius: 15px,
  $content-background: #011627,
  $picker-background: #011627,
  $ym-current-foreground: #ecaa53,
  $ym-hover-background: #ecaa53,
  $navigation-color: #ecaa53,
  $picker-hover-foreground: #d37b08,
  $navigation-hover-color: #d37b08,
  $picker-foreground: #ecaa53,
);
scss

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

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

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

デモ

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxCalendarModule } from "igniteui-angular";
import { MonthpickerStylingComponent } from "./monthpicker-styling/monthpicker-styling.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	MonthpickerStylingComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxCalendarModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from '@angular/core';

@Component({
    selector: 'app-monthpicker-styling',
    styleUrls: ['./monthpicker-styling.component.scss'],
    templateUrl: './monthpicker-styling.component.html'
})
export class MonthpickerStylingComponent {
    public date = new Date();
}
tsコピー

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

htmlコピー

@use '../../variables' as *;

igx-month-picker {
    max-width: 400px;
    margin: 20px;
}

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

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

scssコピー

Edit in: CodesandboxStackBlitz

API リファレンス

• IgxMonthPickerComponent
• IgxCalendarComponent
• IgxCalendarComponent スタイル

テーマの依存関係

• IgxCalendar テーマ
• IgxIcon テーマ

その他のリソース

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

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