Best libraries for Angular time picker in Angular 14?

In angular, we can easily add the Angular time picker component by using, the 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 to our application. We have demonstrated two examples of Angular Timepicker components. Let’s 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.

<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.

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.

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’s 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 using ngx-mat-timepicker

Let’s 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.

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.

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 an angular material time picker. Let’s 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’s 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.

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 a time variable, let’s 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’s 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’s 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’s create a separate project and implement the Angular bootstrap timepicker component.

ng new timePickerApp
cd timePickerApp

Angular bootstrap timepicker using ng-bootstrap Timepicker component

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’s first install the ng-bootstrap library in our project.

ng add @ng-bootstrap/ng-bootstrap

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

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

Now let’s add the ng-bootstrap time picker 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’s 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 the 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.

Add the wanted package to NgModule imports that are 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’s edit the app.component.html file to add ngx-bootstrap timepicker component, in second-time picker we have to add a 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

• 5 Best angular color picker and how to implement it .?
• How to implement angular material datepicker in Angular .?
• How to implement an Angular search filter in Angular?
• How to calculate base64 image size in Angular?
• How to install Angular material?
• How to implement CKEditor in Angular?
• How to use to implement HighCharts Angular?