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

タイム ピッカー コンポーネントを使用すると、ドロップダウンまたはスピナーを備えたダイアログから `Date` オブジェクトの時間部分を入力または選択し、入力フィールドに値が設定されます。デフォルトのドロップダウン モードでは、入力フィールドは編集可能であり、ユーザーは選択した時間を編集することもできます。

タイム ピッカー コンポーネントには、時計ボタンを表示するためのさまざまな組み込みテンプレートと、検証、カスタム時間形式などの機能があります。

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 をインポートします。

Note

IgxTimePicker は、タッチ操作において、BrowserAnimationsModule と HammerModule に依存しています。これらも AppModule に追加する必要があります。

// app.module.ts

...
import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxTimePickerModule } from 'igniteui-angular';
// 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';
// import { IGX_TABS_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 コンポーネントを使用すると、子コンポーネントを投影できます。これは IgxInputGroupComponent と同じです: IgxInput を除いて、igxLabel、IgxHint、igxPrefix、igxSuffix。詳細については、Label および Input トピックを参照してください。

デフォルト設定では、ドロップダウン/ダイアログ トグル アイコンがプレフィックスとして表示されます。IgxPickerToggleComponent コンポーネントを使用して変更または再定義できます。入力の開始位置または終了位置を定義する 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 は次のとおりです。

カスタム動作ボタン

IgxTimePickerComponent は、アクション ボタンのカスタマイズをサポートしています。これを実現するには、igxPickerActions ディレクティブ セレクターでマークされた 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();
}
...

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

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

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

 <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 入力を dialog に設定します。

// timePickerDropdown.component.ts

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

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

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

<!--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 になります。

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

Note

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

増加および減少

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 イベントを処理して、それが発生した場合にユーザーに通知することができます。

Note

最小/最大値は、Date オブジェクトまたは ISO 8601 形式の時刻のみの文字列である必要があります。

// app.module.ts

...
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxTimePickerModule, IgxToastModule } from 'igniteui-angular';
// 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) 内の値が表示されます。無効な時間が入力されたときにメッセージを表示するためにトーストが追加されます。

Note

ドロップダウン/ダイアログの各時間部分に表示される値は、常にゼロから始まる項目のデルタに基づいて計算されます。minValue と maxValue が項目のデルタと一致しない場合、表示される値は、しきい値に一致する次の/最後の可能な値から開始/終了します。

以下は結果です。

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

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,
  $header-hour-text-color: #011627,
  $header-time-period-color: #011627,
  $background-color: #011627
);

Note

Time Picker ウィンドウのコンテンツの一部として使用される追加コンポーネント (IgxButton など) をスタイルするには、それぞれのコンポーネントに固有の追加テーマを作成し、ダイアログ ウィンドウのスコープ内のみに配置する必要があります (残りのアプリケーションの影響を受けません)。

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

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

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

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

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

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

Note

IgxOverlayService を使用して表示される要素にテーマを提供するためのさまざまなオプションの詳細については、オーバーレイ スタイリングのトピックをご覧ください。

テーマを含む

最後にコンポーネントのテーマを含めます。

$legacy-support が true に設定されている場合、テーマを以下のように含めます。

 @include time-picker($my-time-picker-theme);

Note

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

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

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

@include css-vars($my-time-picker-theme);

Note

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

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

デモ

API リファレンス

• IgxIconComponent
• IgxInputDirective
• IgxInputGroupComponent
• IgxTimePickerComponent
• IgxTimePickerComponent スタイル
• IgxOverlayService
• IgxOverlay スタイル

テーマの依存関係

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

その他のリソース

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

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

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