Best libraries for Angular time picker in Angular 12 .?

In angular, we can easily add the Angular time picker component by using, Bootstrap time picker component or 3rd parties libraries like mat-timepicker and the ngx-mat-time. These two libraries are dependent on the Angular material design library and provide material design time picker component looks.

The angular material design doesn’t have a time picker component but we can use the above two libraries and it provides a handy multifunctional material design time picker for Angular 6.0 and above.

In this tutorial, we have demonstrated how to add an angular timepicker component in our application. We have demonstrated two examples of angular timepicker component. Let get started.

Angular material time picker without library

In our first example, we’ll demonstrate a time picker in Angular material using input type time. Here is an Angular material time picker example using matInput and input type attribute time.

Angular time picker example
<mat-form-field appearance="outline">
   <mat-label>Input type time</mat-label>
   <input type="time" matInput name="week" min="09:00" max="18:00">
</mat-form-field>

To use the material design we need to install the material design library by running the following command.

ng add @angular/material

We also need to import MatFormFieldModule and MatInputModule, in our app.module.ts file. We already have articles on how to use Angular material input in forms.

Note : Without any UI library like Angular material design, we can use HTML input element with attribute type=”time” and it will allow us to select a time. But it is our responsibility to add style for normal HTML input with attribute type time.

Best Angular time picker libraries

There are plenty of third parties libraries to implement Angular time pickers. We had listed some of the popular Angular time picker libraries, based on the latest update and weekly downloads.

You can select the time picker library based on your requirement, if you are using Material design for UI, then select library based on material design, and the same is applied to Bootstrap UI.

LibraryDescription
mat-timepickerThis is one of the most downloaded time picker libraries for Material design it has a weekly download of 2,671and has a file size of about 631 kB.
ngx-mat-timepickerThis time picker library for Material design has a weekly download of 1869 and has a size of about 2.28 MB.
ngx-bootstrapThis is bootstrap library provides lots of built-in components based on Bootstrap UI and time picker is one of the pre-made components.
ngx-bootstrapBoth last and second last have pre-mad time picker components, which are ready to use.

Angular material time picker

Angular material design matInput directive, support type with time, it provides material design looks and feels. But using type time will give us only drop-down time selection. If we want time selection like a real watch, then we have to use a third-party library, which we have discussed.

Let first create an Angular time picker application and install the angular material UI library by running the following command.

ng new timepickerApp
cd timepickerApp
ng add @angular/material

This library has a dependency on Angular material design. While running the 3rd command will ask you the select theme, material typography, and animation, press yes on all. To use the Angular material component, we have to import it into our app module. 

Here we had a screenshot of how to select a theme from the Angular material themes option below.

angular material time picker

Angular material time picker using ngx-mat-timepicker

Let first create our Angular material time picker project and we have two examples of it. Here is a screenshot of our first example using the ngx-mat-timepicker library.

angular timepicker example 2

Let install the time picker library the ngx-mat-timepicker.

npm i ngx-mat-timepicker --save

We need to import ngx-mat-timepicker and a few Angular material design modules into our application. Let edit the app.module.ts file

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { NgxMatTimepickerModule } from 'ngx-mat-timepicker';
import { MatFormFieldModule } from '@angular/material/form-field'
import { MatInputModule } from '@angular/material/input';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    MatFormFieldModule,
    MatInputModule,
    NgxMatTimepickerModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

We have completed the configuration for the ngx-mat-timepicker project. Let us demonstrate the Angular timepicker example using ngx-mat-timepicker. You have already seen the screenshot of this example at the top and here is the second screenshot after time is selected.

angular material time picker

We have seen that look of it taken from material design theme, and it has a dependency on Angular material library, so we can call it as angular material time picker. Let add a time picker component in the app.component.html template.

<div class="container">
    <mat-form-field appearance="outline">
        <mat-label>Material Timepicker</mat-label>
        <input matInput [(ngModel)]="time" [ngxMatTimepicker]="picker">
        <ngx-mat-timepicker #picker></ngx-mat-timepicker>
    </mat-form-field>

    <pre>Selected time: {{ time | json}}</pre>

    <router-outlet></router-outlet>
</div>

We also need to define the time property in our component typescript file.

...
export class AppComponent {
   time: any;
}

Angular material time picker using mat-timepicker

In our second example of a material time picker, we are using mat-timepicker. Let create a new project or add to the existing project add mat-timepicker library.

npm install mat-timepicker --save

Here is a screenshot of our second example.

Angular material time picker example 2

This library allows us to select both hour and minute on click. We need to import MatTimepickerModule in the app.module.ts file

....
import { MatTimepickerModule } from 'mat-timepicker';
import { FormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field'
import { MatInputModule } from '@angular/material/input';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ....
    
    MatTimepickerModule,
    MatIconModule,
    MatFormFieldModule,
    MatInputModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In our component typescript file, we need to define time variable, let edit the app.component.ts file

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  defaultValue= {hour: 13, minute: 30};

  timeChangeHandler(event: Event) {
    console.log(event);
  }

  invalidInputHandler() {
    // some error handling  
  }
}

In the app.component.html template, let add the matTimepicker directive on the input element.

<div class="container">
  <mat-form-field appearance="fill">
    <mat-label>TIMEPICKER</mat-label>

    <!-- The timepicker input -->
    <input matTimepicker #t="matTimepicker" #time="ngModel" [strict]="false" id="timepicker-example" mode="24h"
      [ngModel]="defaultValue" name="time" (timeChange)="timeChangeHandler($event)"
      (invalidInput)="invalidInputHandler()">
    <!-- An icon for the timepicker input that will open the timepicker dialog when clicked -->
    <mat-icon matSuffix (click)="t.showDialog()">access_time</mat-icon>
  </mat-form-field>
</div>

Angular Bootstrap timepicker

Now let demonstrate the Angular bootstrap timepicker component. Both ng-bootstrap and ngx-bootstrap are popular libraries, both have lots of downloads. That is why we are demonstrating both time picker component examples.

Let create a separate project and implement the Angular bootstrap timepicker component.

ng new timePickerApp
cd timePickerApp

Angular bootstrap timepicker using ng-bootstrap timepicker component

Angular bootstrap timepicker

We have taken this example from ng-bootstrap documentation to demonstrate its example. The ng-bootstrap is an amazing UI library built specifically for Angular and it has lots of premade components.

Let first install the ng-bootstrap library to our project.

ng add @ng-bootstrap/ng-bootstrap

Let first add the time property variable in our typescript component.

....
export class AppComponent implements {
  time = {hour: 13, minute: 30};
}

Now let add the ng-bootstrap timepicker component to our template. We have two examples of it.

<div class="container">
  <ngb-timepicker [(ngModel)]="time"></ngb-timepicker>
  <hr>
  <pre>Selected time: {{ time | json}}</pre>

  <div *ngIf="modalCloseResult">
    Data from modal: {{ modalCloseResult | json}}
  </div>

  <br><br>
  <ngb-timepicker [(ngModel)]="time" [meridian]="meridian"></ngb-timepicker>
  <button class="btn btn-sm btn-outline-{{meridian ? 'success' : 'danger'}}" (click)="toggleMeridian()">
    Meridian - {{meridian ? "ON" : "OFF"}}
  </button>
   <hr>
  <pre>Selected time: {{time | json}}</pre>
</div>

Angular bootstrap timepicker using ngx-bootstrap timepicker component

In our last example of a time picker, we are using the ngx-bootstrap timepicker component. Let first create a new project and install the ngx-bootstrap library.

ng new boostrapTimepickerApp
cd bootstrapTimepickerApp
npm i ngx-bootstrap --save

We also need to import the Bootstrap CSS file in index.html file as below.

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Here is a screenshot of our second bootstrap time picker example.

Angular bootstrap timepicker example 2

Add the wanted package to NgModule imports that inside the app.module.ts file:

import { TimepickerModule } from 'ngx-bootstrap/timepicker';

@NgModule({
  ...
  imports: [
   ...
    TimepickerModule.forRoot()
  ]
  ...
})

In the app.component.ts file, we have two timepicker variables and one toggle method to set 24 or 12 time format.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  time1: Date = new Date();
  time2: Date = new Date();
  ismeridian = true;
  
  constructor() {}

  toggleMode(): void {
    this.ismeridian = !this.ismeridian;
  }
}

Let edit the app.component.html file to add ngx-bootstrap timepicker component, in second time picker we have add second by enabling [showSeconds]=”true”.

<div class="container">
  <timepicker [(ngModel)]="time1"></timepicker>
  <pre class="alert alert-info">Time is: {{ time1 }}</pre>


  <timepicker [(ngModel)]="time2" [showMeridian]="ismeridian"    
    [showSeconds]="true"></timepicker>

  <pre class="alert alert-info">Time is: {{ time2 }}</pre>


  <button type="button" class="btn btn-info" (click)="toggleMode()">
   12H / 24H
  </button> 
</div>

Conclusion
We have completed two examples of how to add an Angular timepicker to our Angular application using two different third-party libraries. I hope you have got some idea on how to add a timepicker in Angular.

Related posts

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top