Time Picker

In following the design and functionality of the Date Picker, Ignite UI for Angular Time Picker component allows the user to select time from a dialog with spinners, which is then mirrored in the input field. In addition, the user can edit the time value, using an editable masked input with a dropdown.

Time Picker Demo

Usage

To get started with the Ignite UI for Angular Time Picker, let's first import the IgxTimePickerModule in the app.module.ts file. Note that the IgxTimePicker is also dependent on the BrowserAnimationsModule, so it needs to be added to the AppModule as well:

// app.module.ts

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

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

Default

To add the time picker in a template, use the following code:

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

And there we have it:

Setting value

Set a value using the value input. Just add a date:

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

Then use the value input in the template:

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

And there we have it:

To create a two-way data-binding, set ngModel like this:

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

Change delta and spin mode

To change the delta of the items, set the itemsDelta input. To change the spin mode, use the isSpinLoop input:

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

And there we have it:

Validation

Set minValue and maxValue to limit the user input. You can handle the onValidationFailed in order to notify the user if an invalid time is selected.

Note that the min/max values should follow the 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>

And there we have it:

When you add the time picker to your project, its default mode is read-only dialog mode. To change the time picker mode to editable dropdown mode, set the mode input to dropdown:

// timePickerDropdown.component.ts

import { InteractionMode } from 'igniteui-angular';
...
public mode = InteractionMode.DropDown;
<!--timePickerDropdown.component.html-->
<igx-time-picker [mode]="mode"></igx-time-picker>

or just change the mode in the time picker like this:

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

The user now will be able to type, edit or delete the time value in the input in both 12- and 24-hour formats.

Dropdown Mode Keyboard Navigation

When the mouse caret is positioned at the hours, minutes or AM/PM placeholders and pressing the Up arrow key or using Mouse Wheel Up, the hours/minutes are increased. Pressing the Down arrow key or Mouse Wheel Down is used for the reversed operation.

Note that if the time picker's minValue or maxValue are set and isSpinLoop is false, the time scrolling will stop at the specified min/max hour/minute value.

Keyboard Operations:

  • To Openthe dropdown, there are the following options - click on the clock icon, press Space or combination of Alt + Down keys.
  • To Accept and Close the dropdown press Escape or Enter key.
  • Clicking with the mouse outside of the time picker will also Accept the value entered and Close the dropdown.
  • If the dropdown is not opened and a new value is typed, to Accept it - click outside of the time picker or press Tab to move the focus.

And there we have it:

Templating Input Group

We have seen how to make use of the API (properties, events, methods) so that we configure the time picker per our requirements and interact with it programmatically. Now we want to go further and customize its input group look.

To do that, we need to decorate the nested ng-template inside the time picker with IgxTimePickerTemplate directive. ng-template context exposes the following members: openDialog method can be used to open the time picker dialog; displayTime property contains the formatted value; value contains the real value. You could use those by declaring a variables in the ng-template element.

In the following example we modify the default label "Time" and add a second icon as suffix. Below the input group we're using a label to display the real time picker value:

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

And there we have it:

API References

Additional Resources

Our community is active and always welcoming to new ideas.