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.


Examples


<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'; 

@Component({ 
    selector: 'time-picker-component-example', 
    templateUrl: 'timePicker.component.html'
})

export class TimePickerComponentExample {

}       
        

Options

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.