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.

Time Picker Demo

Usage

To get started with the Ignite UI for Angular Time Picker, let's first import the IgxTimePickerModule in our 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 time picker, in the template of our meeting component we can add the following code to get the default time picker:

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

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

And there we have it:

Setting value

We could 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:

If we want to use a two-way data-binding, we could just use ngModel like this:

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

Change delta and spin mode

If we want to change the delta of the items we should set the itemsDelta and for the spin mode we should use the isSpinLoop:

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

And there we have it:

Validation

We can set minValue and maxValue to limit the user input. We also should 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:

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 programatically. 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" 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.

View page on GitHub