import { Component, Injectable } from '@angular/core'; import { NgbTimeStruct, NgbTimeAdapter } from '@ng-bootstrap/ng-bootstrap'; import { FormControl } from '@angular/forms'; @Injectable() export class NgbTimeStringAdapter extends NgbTimeAdapter<string> { fromModel(value: string): NgbTimeStruct { if (!value) { return null; } const split = value.split(':'); return { hour: parseInt(split[0], 10), minute: parseInt(split[1], 10), second: parseInt(split[2], 10) }; } toModel(time1: NgbTimeStruct): string { if (!time1) { return null; } return `${this.pad(time1.hour)}:${this.pad(time1.minute)}:${this.pad(time1.second)}`; } private pad(i: number): string { return i < 10 ? `0${i}` : `${i}`; } } @Component({ selector: 'app-ngbd-timepicker', templateUrl: './timepicker.component.html', providers: [{provide: NgbTimeAdapter, useClass: NgbTimeStringAdapter}] }) export class NgbdtimepickerBasicComponent { time = { hour: 13, minute: 30 }; meridian = true; // This is for the seconds seconds = true; // This is for the spinners spinners = true; // This is for the column step time2: NgbTimeStruct = { hour: 13, minute: 30, second: 0 }; hourStep = 1; minuteStep = 15; secondStep = 30; // last time1: '13:30:00'; // This is for the validation time3; ctrl = new FormControl('', (control: FormControl) => { const value = control.value; if (!value) { return null; } if (value.hour < 12) { return { tooEarly: true }; } if (value.hour > 13) { return { tooLate: true }; } return null; }); toggleMeridian() { this.meridian = !this.meridian; } toggleSeconds() { this.seconds = !this.seconds; } toggleSpinners() { this.spinners = !this.spinners; } }