Angular Bootstrap Time Picker

Angular Time Picker - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Angular Bootstrap time picker is a component that allows 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 

        
            
            <div class="row">
              <div class="col-md-6 mx-auto my-5">
                <form [formGroup]="datePickerForm">
                  <mdb-date-picker
                    name="mydate"
                    [options]="myDatePickerOptions"
                    [placeholder]="'Selected date'"
                    formControlName="datePickerControl"
                    required
                  ></mdb-date-picker>
                </form>
              </div>
              <div class="col-md-6 mx-auto my-5">
                <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>
            </div>

Required Validation 

        
            
            <div class="row">
                <div class="col-md-6 mx-auto my-5">
                    <mdb-time-picker
                      #timePicker
                      [buttonLabel]="'Done'"
                      [twelvehour]="false"
                      [darktheme]="true"
                      [placeholder]="'Selected time'"
                      [label]="'Dark version, 24hours'"
                      [(ngModel)]="darkClock"
                      #model="ngModel"
                      required
                    ></mdb-time-picker>
                </div>
                <div class="col-md-6 mx-auto my-5">
                <div *ngIf="model">
                  <mdb-error *ngIf="model.errors?.required"
                        >Input invalid</mdb-error
                  >
                  <mdb-success *ngIf="!model.errors">Input valid</mdb-success>
                </div>
              </div>
            </div>
          
        
    
        
            
          import { Component, ViewChild } from '@angular/core';
          import { ClockPickerComponent } from 'ng-uikit-pro-standard';

          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
            styleUrls: ['./app.component.scss'],
          })
          export class AppComponent {
            @ViewChild('timePicker', { static: true }) timePicker!: ClockPickerComponent;

            darkClock = null;

            onClear() {
              this.timePicker.clearTimeInput();
              this.darkClock = null;
            }
          }

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>

Date and Time Picker

You can use Time Picker and Date Picker together as a one component. If you want to do this, you have to use input with .date-time class. You have to use also data-open="DatePickerID" HTML data-* Attribute and .time-date-ghost class. 

        
            
            <div class="md-form mdb-date-time">
              <input
                (focus)="this.datePicker.openBtnClicked()"
                #input
                class="form-control date-time picker-opener"
                data-open="picker2"
                placeholder="Date and Time"
                type="text"
              />
              <mdb-date-picker
                (dateChanged)="onDateChange($event)"
                [options]="myDatePickerOptions"
                #datePicker
              ></mdb-date-picker>
              <mdb-time-picker
                (timeChanged)="onTimeChange($event)"
                [buttonLabel]="'Done'"
                [twelvehour]="false"
                #timePicker
              ></mdb-time-picker>
            </div>
          
        
    
        
            
            import { Component, ViewChild, ElementRef } from '@angular/core';
            import { IMyOptions, MDBDatePickerComponent, ClockPickerComponent } from 'ng-uikit-pro-standard';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
              styleUrls: ['./app.component.scss'],
            })
            export class AppComponent {
              @ViewChild('input', { static: true }) input!: ElementRef;
              @ViewChild('datePicker', { static: true }) datePicker!: MDBDatePickerComponent;
              @ViewChild('timePicker', { static: true }) timePicker!: ClockPickerComponent;

              myDatePickerOptions: IMyOptions = {
                // Your options
              };

              onDateChange(event: { actualDateFormatted: string; }) {
                this.input.nativeElement.value = event.actualDateFormatted; // set value to input
                this.datePicker.closeBtnClicked(); // close date picker
                this.timePicker.openBtnClicked(); // open time picker
              };

              onTimeChange(event: string) {
                this.input.nativeElement.value = `${this.input.nativeElement.value}, ${event}`; // set value to input
              };
            }
          
        
    
        
            
            .mdb-date-time {
              mdb-date-picker::ng-deep .mydp,
              mdb-time-picker::ng-deep .tp {
                &,
                input,
                .md-form {
                  height: 0;
                  width: 0;
                }
              }
            }

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 { 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 'Done' Custom text that will be used as label for 'Done' button [buttonLabel]="'Close'"
buttonClear boolean true Disables display clear button [buttonClear]="false"
buttonClearLabel string 'Clear' Custom text that will be used as label for 'Clear' button [buttonClearLabel]="'Close'"
buttonClose boolean false Shows 'Close' button [buttonClose]="false"
buttonCloseLabel string 'Close' Custom text that will be used as label for 'Close' button [buttonCloseLabel]="'Exit'"
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', { static: true }) timePicker: ClockPickerComponent

Name Description Example
clearTimeInput Clears time picker input value this.timePicker.clearTimeInput()