Timepicker in Angular

In my last article we discuss on how to use Progressbar in angular. In these tutorial i discuss on how to add timepicker in our Angular Forms.
First we need to add below line in our app.module.ts file.


.................
//we need to import first TimepickerModule  From Bootstrap.
import { TimepickerModule } from 'ngx-bootstrap';
...................
@NgModule({
  .........
  imports: [
                TimepickerModule.forRoot(),
            ...
           ]
})
export class AppModule(){}

After adding TimepickerModule in the app module file. Now we can use these module in any component.
Let’s create Basic code for the time-picker elements.


<timepicker [(ngModel)]="timevalue" ></timepicker>

<div class="alert alert-info">Time is: {{timevalue}}</div>


import { Component } from '@angular/core';
 
@Component({
  selector: 'timepicker',
  templateUrl: './timepicker.html'
})
export class TimepickerComponent {
  timevalue: Date = new Date();
}

How to set “Meridian” Default & Custom in Time-picker Example display in below code.


<timepicker [(ngModel)]="timevalue" [showMeridian]="ismeridian" ></timepicker>

<div class="alert alert-info">Time is: {{timevalue}}</div>

<timepicker [(ngModel)]="timevalue" [meridians]="meridians" ></timepicker>

<div class="alert alert-info">Time is: {{timevalue}}</div>


import { Component } from '@angular/core';
 
@Component({
  selector: 'timepicker',
  templateUrl: './timepicker.html'
})
export class TimepickerComponent {
  ismeridian: boolean = true;
  timevalue: Date = new Date();
  meridians = ['12H', '24H'];
}

How to Set Minimum & Maximum time limit set in Time-picker Display in below code.


<timepicker [(ngModel)]="timevalue" [min]="minTime" [max]="maxTime" ></timepicker>

<div class="alert alert-info">Time is: {{timevalue}}</div>


import { Component } from '@angular/core';
 
@Component({
  selector: 'timepicker',
  templateUrl: './timepicker.html'
})
export class TimepickerComponent {
  timevalue: Date = new Date();
  minTime: Date = new Date();
  maxTime: Date = new Date();
 
  constructor() {
    this.minTime.setHours(9);
    this.minTime.setMinutes(0);
    this.maxTime.setHours(18);
    this.maxTime.setMinutes(30);
  }


}

You can display Output in below Video

Spread the love

Education For Betterment

About The Author

Jugal Rana

Related Posts

About The Author