Time Picker

    Time Picker コンポーネントを使用すると、スピン ボタンがあるドロップダウン/ダイアログから時間を選択し、入力フィールドに値が設定されます。デフォルトのドロップダウン モードでは、入力フィールドは編集可能であり、ユーザーは選択した時間を編集することもできます。

    Angular Time Picker の例

    使用方法

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

    Note

    IgxTimePicker は、タッチ操作において、BrowserAnimationsModuleHammerModule に依存しています。これらも 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 {}
    

    デフォルト

    Time Picker の追加は、以下のコードを使用してください。

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

    出力はデモと同じです。

    バインディング

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

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

    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 を除いて、igxLabelIgxHintigxPrefixigxSuffix。詳細については、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();
    

    以下はテンプレート化された 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();
    }
    ...
    

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

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

    • ユーザーは、キーボードの 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 { InteractionMode } from 'igniteui-angular';
    ...
    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 プロパティを設定することで、ヘッダーの位置を変更できます。

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

    表示および入力形式

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

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

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

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

    Note

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

    // 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 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

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

    以下は結果です。

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

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

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

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

    スタイル設定

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

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

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

    $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

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

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

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

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

    <igx-time-picker #picker [overlaySettings]="{ outlet: element }">
    </igx-time-picker>
    
    export class TimepickerStylingComponent {
        ...
        constructor(public element: ElementRef) {
        }
    }
    

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

    Note

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

    テーマを含む

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

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

     @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-supportfalse (デフォルト) に設定されている場合、css 変数 を以下のように含めます。

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

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

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

    デモ

    API リファレンス

    テーマの依存関係

    その他のリソース

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