Time Picker

Date Picker のデザインや機能と同様 Ignite UI for Angular Time Picker コンポーネントは、ダイアログのスピン ボタンで時間を選択して入力フィールドに値を設定します。またユーザーは、ドロップダウンで時間値の選択やマスク入力を使用した編集が可能です。

Time Picker デモ

使用方法

Ignite UI for Angular Time Picker を初期化する前に、IgxTimePickerModuleapp.module.ts ファイルにインポートします。注: IgxTimePicker に BrowserAnimationsModule の依存関係があるため、AppModule にも追加する必要があります。

// app.module.ts

...
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxTimePickerModule } from 'igniteui-angular';

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

デフォルト

タイムピッカーを追加するには、ミーティング コンポーネントのテンプレートで、以下のコードを追加するとデフォルトのタイムピッカーが作成されます。

<!--meeting.component.html-->

<igx-time-picker ></igx-time-picker>

以下は結果です。

値の設定

値を設定するには、value 入力を使用します。日付を追加します。

public date: Date = new Date(Date.now());

テンプレートで value 入力を使用します。

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

以下は結果です。

TwoWay データ バインディングを使用するには、ngModel を以下のように使用します。

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

書式の設定

時間の書式を設定するには、IgxTimePickerComponent format オプションを使用します。

以下の表は、使用可能な時間表示書式です。

書式 説明
h 先行ゼロのない 12 時間形式 (1..12) で時間フィールドを書式設定します。
hh 先行ゼロのある 12 時間形式 (01..12) で時間フィールドを書式設定します。
H 先行ゼロがない 24 時間形式 (0..23) で時間フィールドを書式設定します。
HH 先行ゼロがある 24 時間形式 (00..23) の時フィールドを書式設定します。
m 先行ゼロがない分フィールド (0..59) を書式設定します。
mm 先行ゼロのある分フィールド (00..59) を書式設定します。
tt AM/PM フィールドを表します。

以下は結果です。

デルタおよびスピン モードの変更

項目のデルタを変更するには、itemsDelta を設定します。スピン モードを変更するには、isSpinLoop を使用します。

<igx-time-picker [isSpinLoop]="false" [itemsDelta]="{hours:1, minutes:5}"></igx-time-picker>

以下は結果です。

検証

ユーザー入力を制限するために minValue および maxValue を設定できます。onValidationFailed を処理して、無効な時間が選択された場合にユーザーを通知できます。注: 最小値/最大値が format と一致する必要があります。

// app.module.ts

...
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxTimePickerModule, IgxToastModule } from 'igniteui-angular';

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

// app.component.ts

public min: string = "09:00";
public max: string = "18:00";

@ViewChild("toast")
private toast: ElementRef;    

public show(toast) {
    toast.show();
}

public onValidationFailed(timepicker){
    this.show(this.toast);
}
<igx-time-picker format="HH:mm" [vertical]="true" [minValue]="min" [maxValue]="max" (onValidationFailed)="onValidationFailed($event)"></igx-time-picker>
<igx-toast #toast message="Value must be between 09:00 and 18:00"></igx-toast>

以下は結果です。

ドロップダウン モード

タイムピッカーをプロジェクトに追加する際にデフォルト (ダイアログ) モードに設定します。ドロップダウン モードをアクティベイトするために enum InteractionMode を含む必要がありなす。

// timePickerDropdown.component.ts

import { InteractionMode } from 'igniteui-angular';
...

public mode = InteractionMode.DropDown;
<!--timePickerDropdown.component.html-->

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

ユーザーは、12 時間と 24 時間形式で時間値を入力、編集、削除できます。

キーボード ナビゲーションのドロップダウン モード

マウス キャレットは、時、分、AM/PM プレースホルダーに配置できます。Up の押下またはマウス ホイールアップした後に時または分が増加します。Down または マウスホイール ダウンは反転操作に使用できます。注* タイムピッカーの minValue または maxValue を設定して isSpinLoop を無効にし、時間スクローリングが指定した時間または分の値でブレークします。追加でユーザーは以下の操作も実行できます。

  • ドロップダウンを開くには、クロック アイコン をクリックし、Space または Alt + Down キーの組み合わせを押します。
  • ドロップダウンをAcceptClose する場合、Escape または Enter キーを押します。
  • マウスでタイムピッカー以外をクリックして入力した値を Accept してドロップダウンを Close します。
  • ドロップダウンが開いて新しい値が Accept にタイプされた場合、タイムピッカーの外側をクリックまたは Tab を押してフォーカスを移動します。

以下は結果です。

入力グループのテンプレート化

API (プロパティ、イベント、メソッド) を使用して要件によってタイムピッカーを構成し、コードで操作する方法を説明しました。次に入力グループの外観をカスタマイズします。

タイムピッカー内にネストした ng-template を IgxTimePickerTemplate ディレクティブでデコレートする必要があります。ng-template コンテキストは、次のメンバーを公開します。openDialog メソッドはタイムピッカーダイアログに使用できます。displayTime プロパティは書式設定の値を含みます。 value は実際の値を含みます。ng-template 要素で変数を宣言して使用することができます。

以下の例では、デフォルトのラベル "Time" を変更して 2 つ目のアイコンをサフィックスとして追加します。ラベルを使用して実際のタイムピッカーの値を表示する入力グループです。

<igx-time-picker [value]="date">
    <ng-template igxTimePickerTemplate let-openDialog="openDialog" let-value="value" let-displayTime="displayTime">
        <igx-input-group (click)="openDialog()">
            <igx-prefix>
                <igx-icon>home</igx-icon>
            </igx-prefix>
            <label igxLabel>Home Time </label>
            <input igxInput [value]="displayTime" />
            <igx-suffix>
                <igx-icon>access_alarm</igx-icon>
            </igx-suffix>
        </igx-input-group>
        <label>{{value}}</label>
    </ng-template>
</igx-time-picker>
public date: Date = new Date(Date.now());

以下は結果です。

入力グループのテンプレート - ドロップダウン モード

テンプレート入力グループセクションに記載されているすべての情報は、ドロップダウン モードのタイムピッカーを再テンプレート設定する際に適用できます。唯一の要件は、HTML 要素が openDialog(target) に渡されて、その要素が生成されているドロップダウンの配置ターゲットとして使用されることです。

<igx-time-picker #picker [value]="today" format="HH:mm" mode="dropdown">
    <ng-template igxTimePickerTemplate let-openDialog="openDialog" let-value="value" let-displayTime="displayTime">
        <igx-input-group>
            <input #dropDownTarget igxInput [value]="displayTime" (blur)="onBlur(dropDownTarget.value, value, picker)"/>
            <igx-suffix>
                <igx-icon (click)="openDialog(dropDownTarget)">access_time</igx-icon>
            </igx-suffix>
        </igx-input-group>
    </ng-template>
</igx-time-picker>
public today: Date = new Date(Date.now());

テンプレート コンテキストで公開されている displayTime プロパティは読み取り専用です。上記の例では、双方向バインディングを実現するために、入力要素の blur イベントと組み合わせて使用​​されています。

public today: Date = new Date(Date.now());

public onBlur(inputValue: string, value: Date, picker: IgxTimePickerComponent) {
    const parts = inputValue.split(/[\s:]+/);

    const hour = parseInt(parts[0], 10);
    const minutes = parseInt(parts[1], 10);

    if (picker.validHourEntries.indexOf(hour) !== -1 && picker.validMinuteEntries.indexOf(minutes) !== -1) {
        value.setHours(hour, minutes);
    } else {
        throw new Error("This is not a valid hour.");
    }
}

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

カスタム ボタン アクション

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

以下の例では、'CANCEL'、'OK'、'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()">ok</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(Date.now());
    timePicker.close();
}
...

The result is as follows:

API リファレンス

その他のリソース

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