Edit these docs Rate these docs

Angular Bootstrap time picker

Angular Time Picker - Bootstrap 4 & Material Design

Angular Bootstrap time picker is a component that allows 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 the [disabled]="true" input to disable the 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>

Default Date Picker

Below is presented the browser's default Date Picker with MD input.

        <div class="md-form">
          <input type="time" id="input" class="form-control" value="13:00" mdbInput>
          <label for="input">Choose your time</label>

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download

Edit these docs Rate these docs

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"
outlineInput boolean false Use to change default Date Picker to outline version (.md-outline) class [outlineInput]="true"


Name Type Description Example
timeChanged EventEmitter<string> Event emitted when time value change (timeChanged)="onTimeChange($event)"


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', { static: true }) timePicker: ClockPickerComponent

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