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.

Demo

Usage

The first step is to import the IgxTimePickerModule in the app.module.ts file.

Note

The IgxTimePicker is also dependent on both the BrowserAnimationsModule and HammerModule for touch interactions. They need to be added to the AppModule as well.

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

Default

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

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

The output should be the same as the one in the demo.

Setting value

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

public date: Date = new Date();

Then use the value input in the template:

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

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.

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>

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

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", { static: true })
private toast;

public onValidationFailed() {
    this.toast.show();
}
<igx-time-picker
[itemsDelta]="{hours:1, minutes:5}"
format="HH:mm tt"
[vertical]="true"
[minValue]="min"
[maxValue]="max"
(onValidationFailed)="onValidationFailed()"
></igx-time-picker>

<igx-toast #toast message="Value must be between 09:00 and 18:00"></igx-toast>

A toast is added to show a message when an invalid time is selected. The range is (09:00~18:00). Also we changed the delta of the items and the time format so you can see how that looks like.

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 will now be able to type, edit or delete the time value in the input in both 12- and 24-hour formats.

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

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:

Templated 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. We also use igx-hint in the input group 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-hint>{{value}}</igx-hint>
        </igx-input-group>
    </ng-template>
</igx-time-picker>
public date: Date = new Date();

And here's our templated time picker:

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

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

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

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

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

Styling

To get started with styling the time picker, we need to import the index file, where all the theme functions and component mixins live:

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

Following the simplest approach, we create a new theme that extends the igx-time-picker-theme and accepts parameters that style the 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

In order to style any additional components that are used as part of the time picker window's content (such as the IgxButton), an additional theme should be created that is specific to the respective component and is placed under the dialog window's scope only (so it does not affect the rest of the application).

Since the time picker window uses the IgxOverlayService, in order for our custom theme to reach down the time picker window that we want to style, we will provide a specific outlet where the dialog window will be placed in the DOM when it is visible.

The items in our time picker are not descendants of our component host - they are currently being displayed in the default overlay outlet, at the end of the document body. Changing this is done by making use of the outlet property in the overlaySettings. The outlet controls where the overlay container should be rendered.

Here, we can pass a reference to the element where we'd like our container to be:

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

Now, the time picker's items are properly rendered inside of our component's host, which means that our custom theme will take effect:

Note

In order to learn more about the various options for providing themes to elements that are shown by using the IgxOverlayService, you can take a look at this link.

Including Themes

The last step is to include the component theme in our application.

If $legacy-support is set to true, include the theme like that:

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

If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep

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

If $legacy-support is set to false(default), include the component css variables like that:

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

If the component is using an Emulated ViewEncapsulation, you still have to use :host because you need a global selector in order to override the variables.

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

Demo

API References

Additional Resources

Our community is active and always welcoming to new ideas.