Angular Bootstrap time picker

Angular Time Picker - Bootstrap 4 & Material Design

Angular Bootstrap time picker is a component which allow users to choose a time from the form.

Basic examples MDB Pro component

<mdb-time-picker [buttonLabel]="'Done'" [twelvehour]="true" [darktheme]="false" [placeholder]="'Selected time'" [label]="'Light version, 12hours'" [showClock]="true" [ngModel]="lightClock"></mdb-time-picker>

<mdb-time-picker [buttonLabel]="'Done'" [twelvehour]="false" [darktheme]="true" [placeholder]="'Selected time'" [label]="'Dark version, 24hours'" [ngModel]="darkClock"></mdb-time-picker>

Disabled time picker MDB Pro component

Add [disabled]="true" input to disable time picker input field.

<mdb-time-picker [disabled]="true" [buttonLabel]="'Done'" [twelvehour]="true" [darktheme]="false" [placeholder]="'Selected time'" [label]="'Light version, 12hours'" [showClock]="true" [ngModel]="lightClock"></mdb-time-picker>

Angular Time Picker - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of time picker component.

Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

API Reference for MDB Angular Time Picker:
// For MDB Angular Pro
import { TimepickerModule, WavesModule } from 'ng-uikit-pro-standard'



Selector: mdb-time-picker

Type: ClockPickerComponent


Name Type Default Description Example
buttonLabel string - Custom text that will be used as label for 'Done' button [buttonLabel]="'Close'
darkTheme boolean false Changes time picker theme to dark [darkTheme]="true"
disabled boolean false Disables time picker input field [disabled]="true"
label string - Changes date picker label [label]="Example label"
showClock boolean true Whether time picker should open automatically on load [showClock]="false"
tabIndex number 0 Changes tabindex of time picker input field [tabIndex]="-1"
twelvehour boolean false Changes number of displayed hours to 12 [twelvehour]="true"


You can get access to the time picker methods from another component. Add template reference variable to your mdb-time-picker component in HTML file:

<mdb-time-picker #timePicker></mdb-time-picker>

Then in your typescript file use @ViewChild decorator to get access to MdbTimePicker methods:

@ViewChild('timePicker') timePicker: ClockPickerComponent

Name Description Example
clearTimeInput Clears time picker input value this.timePicker.clearTimeInput()