title: Time Picker Component - Native Angular | Ignite UI for Angular _description: The 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. _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Native Angular Components, Angular Time Picker component, Angular Time Picker control, Time Picker, Angular Time Picker _language: kr---

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

Setting format

To set the time format, use the IgxTimePickerComponent format option.

The table below lists valid time display formats:

Format Description
h Formats the hours field in 12-hours format without leading zero (1..12).
hh Formats the hours field in 12-hours format with leading zero (01..12).
H Formats the hours field in 24-hours format without leading zero (0..23).
HH Formats the hours field in 24-hours format with leading zero (00..23).
m Formats the minutes field without leading zero (0..59).
mm Formats the minutes field with leading zero (00..59).
tt Represents the AM/PM field.

The result is as follows:

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>

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:

Templating Input Group - dropdown mode

All the information mentioned in the Templating Input Group section can be applied when re-templating a dropdown mode time picker. The only additional requirement is that an HTML element inside the template should be marked with the dropDownTarget template reference variable to be used as an opening target for the dropdown. Otherwise, the dropdown will not be opened and you will get an error message in the console that advise you to do so.

<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()">access_time</igx-icon>
            </igx-suffix>
        </igx-input-group>
    </ng-template>
</igx-time-picker>
public today: Date = new Date(Date.now());

Note that displayTime property, exposed in the template context, is read-only. In the example above it is used in combination with the input element blur event in order to achieve two-way binding.

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

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.");
    }
}

And there we have it, a re-templated time picker with dropdown and two-way binding support:

Custom button action

The IgxTimePickerComponent supports adding of custom actions buttons. To achieve that, wrap the buttons in ng-template marked with the igxTimePickerActions directive selector.

In the example below, custom action buttons are added for 'CANCEL', 'OK' and 'NOW' actions.

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

The result is as follows:

API References

Additional Resources

Our community is active and always welcoming to new ideas.