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, OnInit } from '@angular/core';

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

          validatingForm: FormGroup;

          ngOnInit() {
            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:
// For MDB Angular Pro
import { TimepickerModule, WavesModule } from 'ng-uikit-pro-standard'

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