Angular Time Picker (タイム ピッカー) の概要

The time picker component has different built-in templates for displaying a clock button, as well as features like validation, custom time formatting, and more.

Angular Time Picker の例

一般に、ユーザーは、テキスト入力を使用するか、Angular Time Picker ドロップダウンから時間値を選択することにより、優先時間を入力できます。以下の基本的な Angular Time Picker の例は、ユーザーがドロップダウンまたはキーボードを使用して値を簡単に入力する方法を示しています。

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

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

ng add igniteui-angular

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

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

// app.module.ts

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

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

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

// home.component.ts

import { FormsModule } from '@angular/forms';
import { IGX_TIME_PICKER_DIRECTIVES } from 'igniteui-angular/time-picker';
// import { IGX_TIME_PICKER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: '<igx-time-picker [(ngModel)]="time"></igx-time-picker>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_TIME_PICKER_DIRECTIVES, FormsModule]
    /* or imports: [IgxTimePickerComponent, FormsModule] */
})
export class HomeComponent {
    public time: Date;
}

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

Angular Time Picker の使用

デフォルト

テンプレートにタイム ピッカーを追加するには、以下のコードを使用してください。

<!--meeting.component.html-->
<igx-time-picker></igx-time-picker>

出力はデモと同じです。

バインディング

The Time Picker in Angular は、value プロパティまたは ngModel を設定することにより、Date オブジェクトまたは ISO 8601 形式の時刻のみの文字列値のいずれかにバインドできます。

まず、ISO 8601 形式で時刻文字列を作成します。

public time = '09:15:30';

次に、ngModel を使用して、双方向のデータ バインディングを作成します:

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

または、テンプレートに value 入力を設定します:

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

リアクティブ フォームで使用するには、ピッカーで formControlName を設定する必要があります。

<form [formGroup]="form">
    <igx-time-picker formControlName="timePicker"></igx-time-picker>
</form>

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

コンポーネントの投影

Time Picker コンポーネントを使用すると、子コンポーネントを投影できます。これは InputGroup と同じです: IgxInputDirective を除いて、igxLabel、IgxHint、igxPrefix、igxSuffix。詳細については、Label および Input トピックを参照してください。

デフォルト設定では、ドロップダウン/ダイアログ トグル アイコンがプレフィックスとして表示されます。PickerToggle コンポーネントを使用して変更または再定義できます。入力の開始位置または終了位置を定義する igxPrefix または igxSuffix で設定できます。

次の例では、カスタム ラベルとヒントを追加し、サフィックスとして表示されるようにデフォルトのトグル アイコンの位置を変更しました。

<igx-time-picker [(ngModel)]="date" mode="dialog" [inputFormat]="'hh:mm'">
    <label igxLabel>Home Time </label>
    <igx-picker-toggle igxSuffix>
        <igx-icon>home</igx-icon>
    </igx-picker-toggle>
    <igx-hint>{{date.toLocaleString()}}</igx-hint>
</igx-time-picker>

public date: Date = new Date();

テンプレート化された Ignite UI for Angular Time Picker は次のとおりです。

カスタム動作ボタン

TimePicker は、アクション ボタンのカスタマイズをサポートしています。これを実現するには、IgxPickerActionsDirective ディレクティブ セレクターでマークされた ng-template でボタンをラップします。

以下の例では、‘CANCEL’、‘DONE’、および ‘NOW’ アクションにカスタム動作ボタンが追加されています。

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

<igx-time-picker #picker format="hh:mm" mode="dropdown">
    <ng-template igxTimePickerActions>
        <div class="container action-buttons">
            <button igxButton="flat" (click)="picker.cancelButtonClick()">cancel</button>
            <button igxButton="flat" (click)="picker.okButtonClick()">done</button>
            <button igxButton="flat" (click)="selectNow(picker)">now</button>
        </div>
    </ng-template>
</igx-time-picker>

// sample.component.ts
...
public selectNow(timePicker: IgxTimePickerComponent) {
    timePicker.value = new Date();
    timePicker.close();
}
...

ドロップダウン、カスタム動作と双方向バインディングをサポートする、再テンプレート化されたタイムピッカーです。

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

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

 <igx-time-picker>
    <label igxLabel>Select time</label>
    <igx-picker-toggle igxPrefix>
        <igx-icon>snooze</igx-icon>
    </igx-picker-toggle>
    <igx-picker-clear igxSuffix>
        <igx-icon>delete</igx-icon>
    </igx-picker-clear>
</igx-time-picker>

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

• ユーザーは、キーボードの Up および Down 矢印キーを使用するか、入力フィールドとドロップダウン/ダイアログをスクロールして、コンポーネントの時間部分をナビゲートできます。minValue または maxValue に関係なく、入力でのナビゲーションが可能ですが、ドロップダウン/ダイアログでのナビゲーションは minValue および maxValue の範囲内に制限されます。
• Time Picker のドロップダウンは、トグル アイコンをクリックするか、Space キーを押すか、Alt + Down キーを押すことで開くことができます。ダイアログ モードでは、これは入力クリックで実行できます。
• ドロップダウン/ダイアログの外側で Enter キーを押すかマウス クリックすると、選択が適用され、ドロップダウン/ダイアログが閉じます。
• Escape キーを押すと、選択がキャンセルされ、ドロップダウン/ダイアログが閉じます。
• ドロップダウンが閉じているときに新しい値を入力したら、Time Picker の外側をクリックするか、Tab を押してフォーカスを移動し、値が受け入れられるようにします。

コード例

ダイアログ モード

デフォルトの Time Picker モードは、編集可能なドロップダウン モードです。Time Picker モードを読み取り専用ダイアログ モードに変更するには、mode 入力を PickerInteractionMode に設定します。

// timePickerDropdown.component.ts

import { PickerInteractionMode } from 'igniteui-angular/core';
// import { PickerInteractionMode } from '@infragistics/igniteui-angular'; for licensed package
...
public mode = PickerInteractionMode.Dialog;

<!--timePickerDropdown.component.html-->
<igx-time-picker [mode]="mode"></igx-time-picker>

または、タイムピッカーで mode を次のように変更します。

<!--timePickerDropdown.component.html-->
<igx-time-picker mode="dialog"></igx-time-picker>

ダイアログ モードでは、ダイアログ ヘッダーに、現在選択されている時刻がピッカーの input format で表示されます。headerOrientation プロパティを設定することで、ヘッダーの位置を変更できます。

minValue と maxValue が設定されている場合、ダイアログにはその範囲内のみの時間が表示されます。詳細については、以下の最小値と最大値の例を参照してください。

表示および入力形式

Time Picker コンポーネントは、さまざまな表示形式と入力形式をサポートしています。

表示形式は、編集モードでの値の形式であり、リストされている Angular DatePipe 形式の 1 つにすることができます。これにより、shortTime や longTime などの事前定義されたフォーマット オプションをサポートできます。

入力形式は、編集モードでないときの値の形式と、時間部分がドロップダウン/ダイアログに表示される形式です。inputFormat プロパティは、DatePipe でサポートされている文字を使用して構築されたフォーマット文字列を受け入れます。hh:mm:ss ですが、shortTime や longTime などの事前定義されたフォーマット オプションはサポートしていません。inputFormat プロパティが定義されていない場合、デフォルトで hh:mm tt になります。 あるいは、inputFormat プロパティが設定されていない場合、入力形式は displayFormat から数値の日付と時刻の部分のみを含む形式として解析できる場合に推測されます。

<igx-time-picker
    [(ngModel)]="time"
    [inputFormat]="`hh:mm:ss`"
    [displayFormat]="`shortTime`">
</igx-time-picker>

増加および減少

Time Picker は、パブリックの increment メソッドと decrement メソッドを公開します。それらは 2 つのオプションのパラメターを受け入れます: 変更される DatePart とそれが変更される delta です。指定しない場合、DatePart はデフォルトで Hours になり、delta はデフォルトで itemsDelta になります。

Date Time Editor ディレクティブで、両方の方法の使用法を示すサンプルを見つけることができます。

フォームと検証

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

リアクティブ フォームの統合サンプルは、ReactiveForms で igxTimePicker を使用する方法を示しています。

最小値と最大値

minValue および maxValue を指定して、ユーザー入力を制限できます。その場合、ドロップダウン/ダイアログにはその範囲内の時刻のみが表示されます。ただし、ドロップダウン モードでは、ユーザーが無効な時間を入力する可能性があります。validationFailed イベントを処理して、それが発生した場合にユーザーに通知することができます。

// app.module.ts

...
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxTimePickerModule } from 'igniteui-angular/time-picker';
import { IgxToastModule } from 'igniteui-angular/toast';
// import { IgxTimePickerModule, IgxToastModule } from '@infragistics/igniteui-angular'; for licensed package

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

// app.component.ts

public time = '10:00:00';
public min = '09:15:30';
public max = '18:15:30';

@ViewChild('toast', { static: true })
private toast;

public onValidationFailed() {
    this.toast.open();
}

<igx-time-picker
 [(ngModel)]="time"
    [itemsDelta]="{hours:2, minutes:5}"
    [inputFormat]="'hh:mm:ss tt'"
    [headerOrientation]="true"
    [minValue]="min"
    [maxValue]="max"
 (onValidationFailed)="onValidationFailed()">
 <label igxLabel>Meeting Start</label>
</igx-time-picker>

<igx-toast #toast message="Value must be between 09:15:30 AM and 06:15:30 PM"></igx-toast>

ドロップダウンには、項目のデルタに基づいて、最小/最大範囲 (09:15:30 AM~06:15:30 PM) 内の値が表示されます。無効な時間が入力されたときにメッセージを表示するためにトーストが追加されます。

以下は結果です。

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

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

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

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

スタイル設定

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

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

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

time-picker-theme を拡張する新しいテーマを作成し、Time Picker のスタイルを設定できるさまざまなパラメーターを受け取ります。

$my-time-picker-theme: time-picker-theme(
  $text-color: #e4c8a5,
  $hover-text-color: #ecaa53,
  $selected-text-color: #ecaa53,
  $header-background: #ecaa53,
  $background-color: #011627
);

Time Picker ウィンドウは IgxOverlayService を使用するため、カスタム テーマがスタイルを設定する Time Picker ウィンドウに適用されるように、ダイアログ ウィンドウが表示されたときに DOM に配置される特定のアウトレットを提供します。

Time Picker内の項目は、コンポーネント ホストの子孫ではありません。現在、ドキュメント本体の最後にあるデフォルトのオーバーレイ アウトレットに表示されています。これを変更するには、overlaySettings の OverlaySettings.outlet プロパティを使用します。outlet は、オーバーレイ コンテナーをレンダリングする場所を制御します。

以下でコンテナーを配置する要素への参照を渡すことができます。

<igx-time-picker #picker [overlaySettings]="{ outlet: element }">
</igx-time-picker>

export class TimepickerStylingComponent {
    constructor(public element: ElementRef) {
    }
}

Time Picker の項目がコンポーネントのホスト内に適切にレンダリングされます。つまり、カスタム テーマが有効になります。

:host {
    @include tokens($my-time-picker-theme);
}

:host {
    ::ng-deep {
        @include tokens($my-time-picker-theme);
    }
}

デモ

API リファレンス

• Icon
• IgxInputDirective
• InputGroup
• TimePicker
• IgxTimePickerComponent スタイル
• IgxOverlayService
• IgxOverlay スタイル

テーマの依存関係

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

その他のリソース

• Date Time Editor
• Label および Input
• リアクティブ フォームの統合

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

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