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

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

    <div class="divider--half"></div>

#### Default

To add the time picker, use the following code:

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

    And here's our templated Ignite UI for Angular Time Picker:

    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 open(toast) {
    toast.open();
}

public onValidationFailed(timepicker){
    this.open(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 requirement is that an HTML element should be passed to the openDialog(target), and that element will be used as a positioning target for the drop down that is being spawned.

    <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(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 Ignite UI for Angular 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.