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>

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

項目のデルタを変更するには、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>

以下は結果です。

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

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

以下は結果です。

API リファレンス

その他のリソース

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