Sign in

Sign up

Angular Bootstrap time picker MDB Pro component

Create <time-picker> tag with the special code inside, like it's shown below, to use 12 or 24 hours time picker.


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

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

Data structure:

import { Component } from '@angular/core'; 

    selector: 'time-picker-component-example', 
    templateUrl: 'timePicker.component.html'

export class TimePickerComponentExample {



You can declare the following options for your time-picker.

Option Description
twelvehour: Boolean Pick 12 or 24 hours clock.
darktheme: Boolean Choose some placeholder for your input.
label: String Choose some label for your input.
placeholder: String Choose some placeholder for your input.
showClock: Boolean Open/hide your clock.