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.

This documentation may contain syntax introduced in the MDB Angular 9.2.0 and can be incompatible with previous versions. For old timepicker documentation please follow the link.

Basic examples MDB Pro component

Live example 
        
            
            <div class="md-form">
              <input
                mdbInput
                type="text"
                id="form1"
                class="form-control"
                [mdbTimePicker]="timepicker"
              />
              <label for="form1">Example label</label>
              <mdb-timepicker-toggle
                [mdbTimePickerToggle]="timepicker"
              ></mdb-timepicker-toggle>
              <mdb-timepicker #timepicker></mdb-timepicker>
            </div>

Required Validation 

        
            
            <form [formGroup]="validatingForm">
              <div class="md-form">
                <input
                  mdbValidate
                  mdbInput
                  type="text"
                  id="form1"
                  class="form-control"
                  [mdbTimePicker]="timepicker"
                  formControlName="required"
                />
                <label for="form1">Example label</label>
                <mdb-timepicker-toggle
                  [mdbTimePickerToggle]="timepicker"
                ></mdb-timepicker-toggle>
                <mdb-timepicker #timepicker></mdb-timepicker>
                <mdb-error *ngIf="input.invalid && (input.dirty || input.touched)">Input invalid</mdb-error>
                <mdb-success *ngIf="input.valid && (input.dirty || input.touched)">Input valid</mdb-success>
              </div>
            </form>
          
        
    
        
            
            import { FormGroup, FormControl, Validators } from '@angular/forms';
            import { Component } from '@angular/core';

            @Component({
            selector: 'validators-component-example',
            templateUrl: 'validators-example.html',
            })
            export class ValidatorsComponent {
              validatingForm: FormGroup;

              constructor() {
                this.validatingForm = new FormGroup({
                  required: new FormControl(null, Validators.required)
                });
              }

              get input() { return this.validatingForm.get('required'); }
            }

Default Time 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:
        
            
          import { MdbTimepickerModule, WavesModule } from 'ng-uikit-pro-standard';
Import example Modules list

Components

MdbTimePicker

Selector: mdb-time-picker

Type: ClockPickerComponent

Inputs

Name Type Default Description Example
autoClose boolean false Auto close modal if you set time [autoClose]="true"
clearButton string 'Clear' Custom text that will be used as label for 'Clear' button [clearButton]="'Reset'"
closeButton string 'Close' Custom text that will be used as label for 'Clear' button [closeButton]="'Hide'"
max string Sets the maximum available time [max]="'01:23PM'"
min string Sets the minimum available time [min]="false"
okButton string 'ok' Custom text that will be used as label for 'OK' button [okButton]="'Done'"
rounding number 1 Changes step of minute digital for 1, 5, 10, 15, 20 [rounding]="5"
twelveHour boolean true Changes format of clock [twelveHour]="false"

Outputs

Name Type Description Example
timeChange EventEmitter<object> Event emitted when time value change (timeChanged)="onTimeChange($event)"
cancel EventEmitter<object> Event emitted when modal will close (cancel)="onModalClose($event)"
done EventEmitter<object> Event emitted when user sets time (done)="onTimeDone($event)"
show EventEmitter<object> Event emitted when user open modal (show)="onModalShow($event)"