Time Picker

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

Angular Time Picker の例

このサンプルが気に入りましたか? 完全な 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';

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

デフォルト

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

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

出力はデモと同じです。

値の設定

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

public date: Date = new Date();

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

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

双方向データバインディングを使用するには、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 フィールドを表します。

カスタムラベル

コンポーネントにネストされた <label> タグ内に igxlabel を配置することで、デフォルトのラベルをカスタムラベルに変更できます。

<!-- timepicker-label.component.html -->
<igx-time-picker>
    <label igxLabel>Meeting Start</label>
</igx-time-picker>

カスタムラベルの外観は、検証セクションの検証サンプルで確認できます。

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

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

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

検証

ユーザー入力を制限するために minValue および maxValue を設定できます。onValidationFailed を処理して、無効な時間が選択された場合にユーザーを通知できます。

Note

最小値 / 最大値は 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:15:30 AM";
public max: string = "06:15:30 PM";

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

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

<igx-time-picker
    [itemsDelta]="{hours:1, minutes:5}"
    format="HH:mm tt"
    [vertical]="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 〜午後 06:15:30) で、それ以外の時間部分はグレー表示されます。また、項目のデルタと時間形式を変更しました。

以下は結果です。

ドロップダウンモード

タイムピッカーをプロジェクトに追加する際にデフォルト (ダイアログ) モードに設定します。編集可能なモードに変更するには、mode 入力を dropdown に設定します。

// timePickerDropdown.component.ts

import { InteractionMode } from 'igniteui-angular';
...
public mode = InteractionMode.DropDown;

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

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

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

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

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

マウスキャレットは、時、分、AM/PM プレースホルダーに配置できます。上矢印の押下またはマウスホイールアップした後に時または分が増加します。下矢印または マウスホイールダウンは反転操作に使用できます。

Note

タイムピッカーの minValue または maxValue が設定され、isSpinLoop が false の場合、時間スクロールは指定した最小/最大の時/分の値で停止します。

キーボード操作

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

以下は結果です。

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

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

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

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

<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-hint>{{value}}</igx-hint>
        </igx-input-group>
    </ng-template>
</igx-time-picker>

public date: Date = new Date();

以下はテンプレート化されたタイムピッカーです。

ドロップダウンモードのテンプレート化

テンプレート入力グループセクションに記載されているすべての情報は、ドロップダウンモードのタイムピッカーを再テンプレート設定する際に適用できます。唯一の要件は、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();

Note

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

public today: Date = new Date();

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();
    timePicker.close();
}
...

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

スタイル設定

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

@import '~igniteui-angular/lib/core/styles/themes/index';

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

$my-time-picker-theme: igx-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

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

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

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

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

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

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

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

Note

IgxOverlayService を使用して表示される要素にテーマを提供するためのさまざまなオプションの詳細については、こちらをご覧ください。

テーマを含む

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

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

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

Note

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

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

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

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

Note

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

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

デモ

API リファレンス

その他のリソース

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

Time Picker

Angular Time Picker の例

使用方法

Note

デフォルト

値の設定

書式の設定

カスタム ラベル

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

検証

Note

ドロップダウン モード

Note

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

ドロップダウン モードのテンプレート化

Note

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

スタイル設定

Note

Note

テーマを含む

Note

Note

デモ

API リファレンス

その他のリソース

テーマ設定

カスタムラベル

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

ドロップダウンモード

ドロップダウンモードのテンプレート化

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