Timepicker overview

NbTimePickerDirective

The NbTimePickerDirective is form control that gives you ability to select a time. The timepicker is shown when input receives a focus event.

<input [nbTimepicker]="timepicker">
<nb-timepicker #timepicker></nb-timepicker>

Installation

Import NbTimepickerModule.forRoot() to your root module.

@NgModule({
  imports: [
    // ...
    NbTimepickerModule.forRoot(),
  ],
})
export class AppModule { }

And NbTimepickerModule to your feature module.

@NgModule({
  imports: [
    // ...
    NbTimepickerModule,
  ],
})
export class PageModule { }

Usage

To show seconds column along with hours and minutes use withSeconds input

<input [nbTimepicker]="timepicker">
<nb-timepicker #timepicker withSeconds></nb-timepicker>

To force timepicker work in 12 hours format, use twelveHoursFormat input. By default, timepicker choose 12 or 24 formats based on application locale standards

<input [nbTimepicker]="timepicker" twelveHoursFormat>
<nb-timepicker #timepicker></nb-timepicker>

A single column picker with options value as time and minute, so users won’t be able to pick hours and minutes individually. You can control options minutes offset via step input, e.g.: 11:00, 11:20, 11:40...'

Timepicker support forms and reactive forms API so you can provide value using formControl and ngModel directives

<input [nbTimepicker]="timepicker" twelveHoursFormat> <nb-timepicker #timepicke [formControl]="formControl">

<input [nbTimepicker]="timepicker" twelveHoursFormat> <nb-timepicker #timepicke [ngModel]="date">

You can provide localized versions of the timepicker text via the localization property of the config object passed to the forRoot or forChild methods of the NbTimepickerModule:

@NgModule({
  imports: [
    // ...
    NbTimepickerModule.forRoot({
      localization: {
        hoursText: 'Hr',
        minutesText: 'Min',
        secondsText: 'Sec',
        ampmText: 'Am/Pm',
      }
    }),
  ],
})
export class AppModule { }

NbTimePickerComponent

The TimePicker components itself. Provides a proxy to TimePicker options as well as custom picker options.