Angular Datepicker (日付ピッカー) コンポーネントの概要

Angular DatePicker は、手動でテキストを入力して日付を入力するか、ポップアップするカレンダー ダイアログから日付値を選択するために使用される機能豊富なコンポーネントです。軽量で使いやすい Angular の DatePicker を使用すると、ユーザーは、月、年、10 年の複数の表示オプションを使用して目的の日付に移動できます。検証を追加するための通常の min、max、および required プロパティがあります。

Ignite UI for Angular DatePicker コンポーネントを使用すると、ユーザーは月表示のカレンダード ロップダウンまたは編集可能な入力フィールドから単一の日付を選択できます。Angular DatePicker は、カレンダーからのみ選択するための dialog モード、ロケール対応でカスタマイズ可能な日付の書式設定と検証の統合もサポートしています。

Angular Datepicker の例

以下は、ユーザーが手動のテキスト入力で日付を選択し、左側のカレンダー アイコンをクリックしてナビゲートできるようになったときに、Angular DatePicker がどのように機能するかを示すサンプルです。描画する方法は以下のとおりです。

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

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

ng add igniteui-angular

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

次に、app.module.ts ファイルに IgxDatePickerModule をインポートします。

Note

ピッカーが IgxCalendarComponent を使用し、タッチ操作のために BrowserAnimationsModule とHammerModule に依存関係があり、これらもモジュールに追加する必要があります。

import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxDatePickerModule } from 'igniteui-angular';
// import { IgxDatePickerModule } from '@infragistics/igniteui-angular'; for licensed package

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

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

// home.component.ts

import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IGX_DATE_PICKER_DIRECTIVES } from 'igniteui-angular';
// import { IGX_DATE_PICKER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-date-picker>
        <label igxLabel>Date</label>
    </igx-date-picker>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [BrowserAnimationsModule, HammerModule, IGX_DATE_PICKER_DIRECTIVES]
    /* or imports: [BrowserAnimationsModule, HammerModule, IgxDatePickerComponent, IgxLabelDirective] */
})
export class HomeComponent {}

Ignite UI for Angular Datepicker モジュールまたはディレクティブをインポートしたので、igx-date-picker コンポーネントの使用を開始できます。

Angular Datepicker コンポーネントの使用

Datepicker の表示

デフォルトの dropdown 状態の Datepicker をインスタンス化するには、以下のコードを使用してください。

<igx-date-picker>
    <label igxLabel>Date</label>
</igx-date-picker>

オプション

IgxDatePickerComponent は date または string にバインドできます。

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

public date = new Date(2000, 0, 1);

文字列がピッカーにバインドされている場合は、ISO 8601 形式の日付のみの文字列である必要があります。

<igx-date-picker [value]="'2000-01-01'"></igx-date-picker>

これについての詳細は、DateTime Editor の ISO セクションにあります。

ngModel を介して双方向バインディングが可能です:

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

value 入力を介しても可能です:

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

さらに、formControlName をピッカーに設定して、リアクティブ フォームで使用することができます:

<form [formGroup]="form">
    <igx-date-picker formControlName="datePicker"></igx-date-picker>
</form>

export class SampleFormComponent {
    // ...
    public form: FormGroup;
    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            datePicker: ['', Validators.required]
        });
    }
}

Note

ピッカーは常に Date 値を返します。これは、モデルにバインドされている場合、または文字列変数への双方向バインドの場合、新しい日付が選択された後、タイプが Date になることを意味します。

コンポーネントの投影

IgxDatePickerComponent は、IgxInput を除く IgxInputGroupComponent がサポートする子コンポーネントの投影を許可します。それは、igxLabel、igx-hint / IgxHint、igx-prefix / igxPrefix、igx-suffix / igxSuffix です。詳細については、Label および Input トピックを参照してください。

<igx-date-picker #datePicker>
    <igx-icon igxSuffix (click)="datePicker.open()">keyboard_arrow_down</igx-icon>
</igx-date-picker>

上記のスニペットでは、​​入力の最後、デフォルトのクリア アイコンの直後に追加のトグル アイコンが追加されます。プレフィックスとサフィックスを次々に積み重ねることができるため、これによってデフォルトのトグル アイコンが削除されることはありません。

トグル アイコンとクリア アイコンのカスタマイズ

IgxDatePickerComponent は IgxPickerToggleComponent と IgxPickerClearComponent で構成できます。これらを使用すると、独自のクリック ハンドラーを追加しなくても、トグル アイコンとクリア アイコンを変更できます。

 <igx-date-picker>
    <label igxLabel>Select a Date</label>
    <igx-picker-toggle igxPrefix>
        <igx-icon>calendar_view_day</igx-icon>
    </igx-picker-toggle>
    <igx-picker-clear igxSuffix>
        <igx-icon>delete</igx-icon>
    </igx-picker-clear>
</igx-date-picker>

カスタム動作ボタン

ピッカーのアクション ボタンは、次の 2 つの方法で変更できます:

• ボタンのテキストは、todayButtonLabel と cancelButtonLabel 入力プロパティを使用して変更できます:

<igx-date-picker [todayButtonLabel]="'今日'" [cancelButtonLabel]="'キャンセル'"></igx-date-picker>

• ボタン全体は、igxPickerActions ディレクティブを使用してテンプレート化できます。これを使用すると、日付ピッカーの calendar とそのすべてのメンバーにアクセスできます。

<igx-date-picker>
    <ng-template igxPickerActions let-calendar>
        <button igxButton="flat" (click)="calendar.viewDate = today">Today</button>
    </ng-template>
</igx-date-picker>

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

キーボードを使用して IgxDatePickerComponent のカレンダー UI を開いたり閉じたりすることは、dropdown モードでのみ使用でき、以下のキーの組み合わせを介してトリガーできます。

キー	説明
Space	カレンダーのポップアップを表示し、フォーカスを合わせます。
Alt + ↓	カレンダーのポップアップを表示し、フォーカスを合わせます。
Esc	カレンダーのポップアップを閉じて、入力フィールドにフォーカを合わせます。
Enter	カレンダーのポップアップを閉じ、フォーカスされた日付を選択して、フォーカスを入力フィールドに移動します。
Alt + ↑	カレンダーのポップアップを閉じて、入力フィールドにフォーカを合わせます。

IgxDatePickerComponent は IgxDateTimeEditorDirective を使用するため、キーボード ナビゲーションを継承します。

コード例

ダイアログ モード

IgxDatePickerComponent は、dialog モードもサポートしています:

<igx-date-picker [mode]="'dialog'"></igx-date-picker>

表示および入力形式

inputFormat および displayFormat は、ピッカーのエディターが指定された形式に従うように設定できるプロパティです。inputFormat プロパティは、ピッカーが dropdown モードのときに使用され、入力の編集可能なマスクとそのプレースホルダー (何も設定されていない場合) を管理します。さらに、inputFormat はロケール ベースであるため、何も指定されていない場合、ピッカーはデフォルトでブラウザーで使用されるものになります。

注意すべき点は、Ignite UI の Angular DatePicker Component が date と month の部分がない形式で提供された場合、それらの部分に常に先行ゼロを追加することです。例えば、d/M/yy は dd/MM/yy になります。これは編集中にのみ適用されます。

一方、displayFormat は Angular の DatePipe を使用し、フォーカスされていないときにピッカーの入力を書式設定するために使用されます。displayFormat が指定されていない場合、ピッカーは inputFormat を displayFormat として使用します。

これらの詳細については、IgxDateTimeEditor の例のセクションを参照してください。

Note

IgxDatePicker が IME 入力をサポートするようになりました。合成が終了すると、コントロールはワイド文字の数字を ASCII 文字に変換します。

増加および減少

IgxDatePickerComponent は、increment メソッドと decrement メソッドを公開します。どちらも IgxDateTimeEditorDirective から取得され、現在設定されている日付の特定の DatePart を増加および減少するために使用できます。

<igx-date-picker #datePicker>
    <igx-icon igxPrefix (click)="datePicker.increment(DatePart.Month, 3)">keyboard_arrow_up</igx-icon>
    <igx-icon igxPrefix (click)="datePicker.decrement(DatePart.Year. 4)">keyboard_arrow_down</igx-icon>
</igx-date-picker>

また、spinDelta 入力プロパティとして、現在設定されている日付の特定の日付部分を増加または減少するために使用できます。

<igx-date-picker [spinDelta]="{date: 2, month: 3, year: 4}"></igx-date-picker>

Angular Forms で

IgxDatePickerComponent は、コア FormsModule、NgModel、および ReactiveFormsModule (FormControl、FormGroup など) からのすべてのディレクティブをサポートします。これには、フォーム バリデータ機能も含まれます。さらに、コンポーネントの minValue プロパティと maxValue プロパティはフォーム バリデータとして機能します。

リアクティブ フォームの統合トピックにアクセスすると、IgxDatePickerComponent をリアクティブ フォームで確認できます。

日付ピッカーとタイム ピッカーを併用する

IgxDatePicker と IgxTimePicker を一緒に使用する場合、それらを 1 つの同じ Date オブジェクト値にバインドする必要がある場合があります。

テンプレート駆動フォームでこれを実現するには、ngModel を使用して両方のコンポーネントを同じ Date オブジェクトにバインドします。

リアクティブ フォームでは、各コンポーネントの valueChange イベントを処理し、他のコンポーネントの値を更新できます。

カレンダー固有の設定

IgxDatePickerComponent は IgxCalendarComponent を使用し、日付ピッカーが公開するプロパティを介してその設定の一部を変更できます。これらの一部には、ピッカーが展開されたときに複数のカレンダーを表示できる displayMonthsCount、週の開始日を決定する weekStart、年の各週の番号を表示する showWeekNumbers などが含まれます。

インターナショナリゼーション

IgxDatePickerComponent のローカライズは、locale 入力で制御できます。さらに、IgxCalendarComponent によって提供される igxCalendarHeader と igxCalendarSubheader テンプレートを使用して、ヘッダーとサブヘッダーの外観を指定できます。このテンプレートを使用する方法の詳細については、IgxCalendarComponent トピックを参照してください。

以下は日本ロケール定義を持つ Angular DatePicker です。

<igx-date-picker locale="ja-JP" [value]="date">
  <ng-template igxCalendarHeader let-format>
    {{ format.month.combined | titlecase }}{{format.day.combined }}{{ format.weekday.combined }}
  </ng-template>
  <ng-template igxCalendarSubheader let-format>
    <span (click)="format.yearView()">{{ format.year.combined }}</span>
    <span (click)="format.monthView()">{{ format.month.combined | titlecase }}</span>
  </ng-template>
</igx-date-picker>

スタイル設定

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

@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';

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

$custom-datepicker-theme: calendar-theme(
    $header-background: #345779,
    $content-background: #fdfdfd,
    $header-text-color: #ffffff,
    $date-current-text-color: #2dabe8,
    $picker-arrow-color: #2dabe8,
    $date-selected-text-color: #fdfdfd,
    $date-current-bg-color: #fdfdfd,
    $picker-arrow-hover-color: #345779,
    $year-current-text-color: #2dabe8,
    $year-hover-text-color: #2dabe8,
    $month-current-text-color: #2dabe8,
    $month-hover-text-color: #2dabe8,
    $picker-text-color: #2dabe8,
    $picker-text-hover-color: #345779,
);

CSS 変数の使用

最後に Angular DatePicker のカスタム テーマを設定します。

@include css-vars($custom-datepicker-theme);

テーマ オーバーライドの使用

Internet Explorer 11 などの古いブラウザーのコンポーネントをスタイル設定するには、CSS 変数をサポートしていないため、別のアプローチを用いる必要があります。

コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化に解除する必要があります。カスタム テーマが他のコンポーネントに影響しないようにするには、::ng-deep の前に :host セレクターを含めるようにしてください。

:host {
   ::ng-deep {
       @include calendar($custom-datepicker-theme);
   }
}

API リファレンス

• IgxDatePickerComponent
• IgxDateTimeEditorDirective
• IgxCalendarComponent
• IgxCalendarComponent スタイル
• IgxOverlay スタイル
• IgxInputGroupComponent

テーマの依存関係

• IgxCalendar テーマ
• IgxOverlay テーマ
• IgxIcon テーマ
• IgxButton テーマ
• IgxInputGroup テーマ
• IgxDropDown テーマ

その他のリソース

• Time Picker
• Date Time Editor
• Date Range Picker
• リアクティブ フォームの統合

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

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