Angular Time Picker

Introduction to Angular Time Picker

In modern web applications, my times’ user is expected to enter or select a time slot in various acceptable formats, to implement time picker, in these cases as a standard practice, many libraries and frameworks have their implementation of date and time selector. Time picker is a UI component that allows a user to enter or select a time from a given user interface in a specific format, it is very common functionality and requirement in many modern web applications. Some times per requirements we have date and time picker together at the screen.

As time picker is a common UI component many third party libraries provide the implementation for time picker. Here we will discuss two common time pickers implemented in Angular and steps to add them in an Angular project.

ng-bootstrap Time Picker

ng bootstrap is an Angular library, build using Angular and bootstrap, ng-bootstrap has many builds in Angular components and directives, in case a project is using Bootstrap classes for the styling of the project, one can use this date picker widget in the project. Here are steps to implement the time picker provided by ng-bootstrap.

1. Installation of ng-bootstrap

To add ng bootstrap in the project we can use below command for npm and yarn.

Code:

npm install --save @ng-bootstrap/ng-bootstrap (If using NPM)

OR

yarn add @ng-bootstrap/ng-bootstrap (If using Yarn)

Once ng bootstrap is installed, we have to import the NgbModule in our core module and update imports array

Code:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; @NgModule({
imports: [ NgbModule], declarations: []
})

ng-bootstrap provides NGB-time picker component, this is a component that helps us in picking hours, minutes and seconds and create a time picker.

Adding ngb-timepicker in our Template

Here is the code that demonstrates how to add the component in our component’s template.

Code:

<ngb-timepicker [(ngModel)]="time"></ngb-timepicker>

Output:

This code is using ngModel directive to do a two-way data binding and the value is getting stored in the time variable in .ts file. This selected time is stored in a JSON object:

Code:

Selected time: {
"hour": 1,
"minute": 30,
}

The ng-bootstrap project also provides us a way to configure the seconds in the time picker, here is a sample.

Code:

<ngb-timepicker [(ngModel)]="time" [seconds]="seconds"></ngb-timepicker>

Output:

JSON Response

Selected  time:  { "hour":  13,
"minute":  30,
"second":  30
}

Meridian On/Off

In the ngb time picker, there is also an option for switching Meridian on and off, Meridian attribute can be passed to the ngb-timepicker, and toggled based on last selection. Here in the below example ngb-timepicker accepts the value of meridian as Boolean and turns it on or off based on the value passed in the input.

Template File

Code:

<ngb-timepicker [(ngModel)]="time" [meridian]="meridian"></ngb-timepicker>
<button class="btn btn-lg btn-outline-{{meridian ? 'success' :
'danger'}}" (click)="toggleMeridian()">
Meridian - {{meridian ? "ON" : "OFF"}}
</button>

Component.ts File

Code:

toggleMeridian() {
this.meridian = !this.meridian;
}

Output: These are two outputs, the first one is with meridian and the second one is without meridian.

Spinner ON/OFF

Ngb time picker also provides configuration for showing and hiding spinner, which is the upper and lower arrow in the user interface. In this example, toggleSpinner is the event listener function, which toggles the show spinner property

Template File

Code:

<ngb-timepicker [(ngModel)]="time" [spinner]="showSpinner">
</ngb-timepicker>
<button (click)="toggleSpinner()">
Spinners - {{showSpinner ? "SHOW" : "HIDE"}}
</button>

Component.ts file

toggleSpinner() {
this.showSpinner = !this. showSpinner;
}

Output: Here is output for with and without spinners. In second output spinners are missing as per configuration.

Output without Spinner: Spinners are missing, as the configuration is false here.

Global configuration of timepicker in ng-bootstrap

Internationalization and global configuration options are also available in the ng bootstrap time picker. For adding these configurations in our project, we can add the following imports and use them in our module.

Global configuration of time object

NgbTimepickerConfig is to be imported for global configuration.

Code:

import {NgbTimepickerConfig} from '@ng-bootstrap/ng-bootstrap'; 
import {NgbTimeStruct} from '@ng-bootstrap/ng- bootstrap';

With the help of the NgbTimeStruct object, we can have a global configuration object and all the object added after that will be constructed as per global configuration provided in the class. We need to add NgbTimeStruct to our provider’s array in component decorator array.

Code:

export class NgbdTimepickerConfig {
time: NgbTimeStruct = {hour: 10, minute: 10,
second: 0};
constructor(config: NgbTimepickerConfig) {
config.seconds = true;
config.spinners = false;
}
}

Output:

Material Time Picker in Angular

The next material time picker (ngx-material-timepicker) is one very popular time picker library with material UI implementation. For a project using material UI, we can implement time picker functionality using ngx-material-timepicker.

To implement material UI time picker, using the ngx-material-timepicker package, first, we need to install the package:

1. Command to add ngx-material-timepicker in the project:

npm install --save ngx-material-timepicker

OR

yarn add --save ngx-material-timepicker

2. Next step is to import the timepicker module into our application’s module

import {NgxMaterialTimepickerModule} from 'ngx-material-timepicker';

3. Now we should add NgxMaterialTimepickerModule in our import array, below is the code for adding NgxMaterialTimepickerModule in imports array.

@NgModule({
imports: [NgxMaterialTimepickerModule]
})

4. Now the material UI time picker module is in the projects, we can add it in our project’s components, here is the code snippet for same.

<ngx-material-timepicker #picker></ngx-material-timepicker>

A lot of formatting and validation options are available in Angular material time picker and can be used as per the requirement of the project.

Apart from the mentioned two packages there are many third-party libraries build in Angular, which provide us control for time picker, some of these are paid and some are free to use for few controls:

• Telerik kendo Angular UI
• Mdbootstrap Angular Material UI

Recommended Articles

This is a guide to Angular Time Picker. Here we discuss an introduction to Angular Time Picker with ng bootstrap time picker and material time picker. You can also go through our other related articles to learn more –

1. Controllers in AngularJS
2. Angular 7 Components
3. Angular Features
4. AngularJS Animations