Angular Time Picker

Angular Time Picker
Techiio-author
Written by Sagar RabidasJanuary 12, 2022
9 min read
Angular
0 VIEWS 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 0 VIEWS SHARE
Techiio-author
Sagar Rabidas

Software Developer

In this blog, we will discuss Angular Time Picker

Angular Time Picker:-

In modern internet applications, my instances’ user is expected to go into or choose a time slot in numerous ideal formats, to enforce a time picker, in those instances as a popular exercise, many libraries and frameworks have their implementation of date and time selector. Time picker is a UI thing that allows a user to go into or pick out a time from a given person interface in a specific format, it's miles a very commonplace capability and requirement in many modern internet packages. Once in a while in step with requirements, we've got a date and time picker together on 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.

  • Installation of ng-bootstrap:-

To add ng bootstrap in the project we can use the 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 the imports array

Code:

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

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

Adding ngb-time picker 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>

This code is using the ngModel directive to do a two-way data binding and the value is getting stored in the time variable in the .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>

JSON Response

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

Meridian On/Off

In the ngb time picker, there's also an option for switching meridian on and rancid, meridian attribute can be passed to the ngb-time picker and toggled based on the remaining selection. Here in the underneath example ngb-time picker accepts the cost of the meridian as boolean and turns it on or off primarily based on the fee passed inside the entrance.

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;
}

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;
}

Global configuration of time picker 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

Code:

NgbTimepickerConfig is to be imported for global configuration.
import {NgbTimepickerConfig} from '@ng-bootstrap/ng-
bootstrap'; import {NgbTimeStruct} from '@ng-bootstrap/ng-
bootstrap';

With the help of the ngbtimestruct item, we will have a global configuration item, and all of the items delivered as a way to be constructed as per the worldwide configuration supplied inside the magnificence. We want to add ngbtimestruct to our issuer’s array within the element decorator array.

Code:

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

Material Time Picker in Angular

The next material time picker (ngx-material-time picker) 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-time picker.

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

  • Command to add ngx-material-time picker in the project:
npm install --save ngx-material-timepicker
  • The next step is to import the time picker module into our application’s module
import {NgxMaterialTimepickerModule} from 'ngx-material-timepicker';
  • Now we should add NgxMaterialTimepickerModule in our import array, below is the code for adding NgxMaterialTimepickerModule in the imports array.
@NgModule({
imports: [NgxMaterialTimepickerModule] })
  • Now the material UI time picker module is in the projects, we can add it to our project’s components, here is the code snippet for the same.
<ngx-material-timepicker #picker></ngx-material-timepicker>

Angular
AngularJs
Angular Time Picker
0 VIEWS 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 0 VIEWS SHARE
Was this blog helpful?
techiio-price-plantechiio-price-plantechiio-price-plantechiio-price-plantechiio-price-plan
You must be Logged in to comment
Code Block
Techiio-logo

Techiio is on the journey to build an ocean of technical knowledge, scouring the emerging stars in process and proffering them to the corporate world.

Follow us on:

Subscribe to get latest updates

You can unsubscribe anytime from getting updates from us
Developed and maintained by Wikiance
Developed and maintained by Wikiance