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>

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>
        </div>

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'
Import example Modules list

Components

MdbTimePicker

Selector: mdb-time-picker

Type: ClockPickerComponent

Inputs

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"

Outputs

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

Methods

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()