Timepicker

Angular Bootstrap 5 Timepicker component

Use MDB custom Angular Timepicker component to select time.

Note: Read the API tab to find all available options and advanced customization

Basic example

        
            
            <mdb-form-control>
              <input
                mdbInput
                type="text"
                id="form1"
                class="form-control"
                [mdbTimepicker]="timepicker"
                required
              />
              <label mdbLabel class="form-label" for="form1">Example label</label>
              <mdb-timepicker-toggle [mdbTimepickerToggle]="timepicker"></mdb-timepicker-toggle>
              <mdb-timepicker #timepicker></mdb-timepicker>
            </mdb-form-control>

Inline Timepicker with 12h

MDB Timepicker allows you to use a inline version timepicker. Default version is with 12h. 

        
            
            <mdb-form-control>
              <input
                mdbInput
                type="text"
                id="form1"
                class="form-control"
                [mdbTimepicker]="timepicker"
              />
              <label mdbLabel class="form-label" for="form1">Example label</label>
              <mdb-timepicker-toggle [mdbTimepickerToggle]="timepicker"></mdb-timepicker-toggle>
              <mdb-timepicker #timepicker [inline]="true"></mdb-timepicker>
            </mdb-form-control>

Inline Timepicker with 24h

MDB Timepicker allows you to use a inline version timepicker. You have to add options format24 to true. 

        
            
            <mdb-form-control>
              <input
                mdbInput
                type="text"
                id="form1"
                class="form-control"
                [mdbTimepicker]="timepicker"
              />
              <label mdbLabel class="form-label" for="form1">Example label</label>
              <mdb-timepicker-toggle [mdbTimepickerToggle]="timepicker"></mdb-timepicker-toggle>
              <mdb-timepicker #timepicker [inline]="true" [format24]="true"></mdb-timepicker>
            </mdb-form-control>

Custom Icon

You can set your custom icon to input. If you will add the icon, the main icon from the input will be replaced with yours. 

        
            
              <mdb-form-control>
                <input
                  mdbInput
                  type="text"
                  id="form1"
                  class="form-control"
                  [mdbTimepicker]="timepicker"
                />
                <label mdbLabel class="form-label" for="form1">Example label</label>
                <mdb-timepicker-toggle
                  [icon]="'fas fa-stopwatch'"
                  [mdbTimepickerToggle]="timepicker"
                ></mdb-timepicker-toggle>
                <mdb-timepicker #timepicker></mdb-timepicker>
              </mdb-form-control>

Default time

MDB Timepicker allows to initialize a default time in the picker.

  • 12:34
  • 12:34 PM
  • 12:34 AM
        
            
            <mdb-form-control>
              <input
                mdbInput
                type="text"
                id="form1"
                class="form-control"
                [mdbTimepicker]="timepicker"
                required
                [value]="'02:12 PM'"
              />
              <label mdbLabel class="form-label" for="form1">Example label</label>
              <mdb-timepicker-toggle
                [mdbTimepickerToggle]="timepicker"
              ></mdb-timepicker-toggle>
              <mdb-timepicker #timepicker></mdb-timepicker>
            </mdb-form-control>
            <mdb-form-control>
              <input
                mdbInput
                type="text"
                id="form1"
                class="form-control"
                [mdbTimepicker]="timepicker"
                required
                [value]="'05:12 AM'"
              />
              <label mdbLabel class="form-label" for="form1">Example label</label>
              <mdb-timepicker-toggle
                [mdbTimepickerToggle]="timepicker"
              ></mdb-timepicker-toggle>
              <mdb-timepicker #timepicker></mdb-timepicker>
            </mdb-form-control>
            <mdb-form-control>
              <input
                mdbInput
                type="text"
                id="form1"
                class="form-control"
                [mdbTimepicker]="timepicker"
                required
                [value]="'23:44'"
              />
              <label mdbLabel class="form-label" for="form1">Example label</label>
              <mdb-timepicker-toggle
                [mdbTimepickerToggle]="timepicker"
              ></mdb-timepicker-toggle>
              <mdb-timepicker [format24]="true" #timepicker></mdb-timepicker>
            </mdb-form-control>

Format 24h

Timepicker allows you to use time format with 24 hours. 

        
            
            <mdb-form-control>
              <input
                mdbInput
                type="text"
                id="form1"
                class="form-control"
                [mdbTimepicker]="timepicker"
              />
              <label mdbLabel class="form-label" for="form1">Example label</label>
              <mdb-timepicker-toggle [mdbTimepickerToggle]="timepicker"></mdb-timepicker-toggle>
              <mdb-timepicker #timepicker [format24]="true"></mdb-timepicker>
            </mdb-form-control>

Just Input

You can set a timepicker to just an input.

        
            
            <mdb-form-control>
              <input
                mdbInput
                type="text"
                id="form1"
                class="form-control"
                [mdbTimepicker]="timepicker"
                (click)="timepicker.open()"
              />
              <label mdbLabel class="form-label" for="form1">Example label</label>
              <mdb-timepicker #timepicker></mdb-timepicker>
            </mdb-form-control>

Increment

You can set a increment value by 5 to a minutes.

        
            
            <mdb-form-control>
              <input
                mdbInput
                type="text"
                id="form1"
                class="form-control"
                [mdbTimepicker]="timepicker"
              />
              <label mdbLabel class="form-label" for="form1">Example label</label>
              <mdb-timepicker-toggle [mdbTimepickerToggle]="timepicker"></mdb-timepicker-toggle>
              <mdb-timepicker #timepicker [increment]="true"></mdb-timepicker>
            </mdb-form-control>

Max time

        
            
            <mdb-form-control>
              <input
                mdbInput
                type="text"
                id="form1"
                class="form-control"
                [mdbTimepicker]="timepicker"
              />
              <label mdbLabel class="form-label" for="form1">Example label</label>
              <mdb-timepicker-toggle [mdbTimepickerToggle]="timepicker"></mdb-timepicker-toggle>
              <mdb-timepicker #timepicker [maxTime]="'6:35'"></mdb-timepicker>
            </mdb-form-control>

Max time with PM

        
            
            <mdb-form-control>
              <input
                mdbInput
                type="text"
                id="form1"
                class="form-control"
                [mdbTimepicker]="timepicker"
              />
              <label mdbLabel class="form-label" for="form1">Example label</label>
              <mdb-timepicker-toggle [mdbTimepickerToggle]="timepicker"></mdb-timepicker-toggle>
              <mdb-timepicker #timepicker [maxTime]="'6:35 PM'"></mdb-timepicker>
            </mdb-form-control>

Max time with AM

        
            
            <mdb-form-control>
              <input
                mdbInput
                type="text"
                id="form1"
                class="form-control"
                [mdbTimepicker]="timepicker"
              />
              <label mdbLabel class="form-label" for="form1">Example label</label>
              <mdb-timepicker-toggle [mdbTimepickerToggle]="timepicker"></mdb-timepicker-toggle>
              <mdb-timepicker #timepicker [maxTime]="'6:35 AM'"></mdb-timepicker>
            </mdb-form-control>

Min time

        
            
            <mdb-form-control>
              <input
                mdbInput
                type="text"
                id="form1"
                class="form-control"
                [mdbTimepicker]="timepicker"
              />
              <label mdbLabel class="form-label" for="form1">Example label</label>
              <mdb-timepicker-toggle [mdbTimepickerToggle]="timepicker"></mdb-timepicker-toggle>
              <mdb-timepicker #timepicker [minTime]="'10:15'"></mdb-timepicker>
            </mdb-form-control>

Min time with PM

        
            
            <mdb-form-control>
              <input
                mdbInput
                type="text"
                id="form1"
                class="form-control"
                [mdbTimepicker]="timepicker"
              />
              <label mdbLabel class="form-label" for="form1">Example label</label>
              <mdb-timepicker-toggle [mdbTimepickerToggle]="timepicker"></mdb-timepicker-toggle>
              <mdb-timepicker #timepicker [minTime]="'6:35 PM'"></mdb-timepicker>
            </mdb-form-control>

Min time with AM

        
            
            <mdb-form-control>
              <input
                mdbInput
                type="text"
                id="form1"
                class="form-control"
                [mdbTimepicker]="timepicker"
              />
              <label mdbLabel class="form-label" for="form1">Example label</label>
              <mdb-timepicker-toggle [mdbTimepickerToggle]="timepicker"></mdb-timepicker-toggle>
              <mdb-timepicker #timepicker [minTime]="'6:35 AM'"></mdb-timepicker>
            </mdb-form-control>

Timepicker - API

Import

        
            
          import { MdbTimepickerModule } from 'mdb-angular-ui-kit/timepicker';
          …
          @NgModule ({
            ...
            imports: [MdbTimepickerModule],
            ...
          })

Inputs

Name Type Default Description
disabled boolean false

Set a disabled attribute to input in wrapper
format12 boolean true

Allows to use format 12h
format24 boolean false

Allows to use format 24h
increment boolean false

Allows to set increment minutes by 5
inline boolean false

Allows to use a inline version of timepicker
maxTime string - Changes max available time
minTime string - Changes min available time
switchHoursToMinutesOnClick boolean true

Allows to enable/disable switching to minutes if hours are selected
icon string 'far fa-clock'

Allows to set custom classes to timepicker icon

Outputs

Name Description
opened This event fires immediately when the timepicker is opened.
closed This event fires immediately when the timepicker is closed.
timeChange This event fires immediately when the new time is selected.

Methods

Name Description Example
open Manually opens a timepicker timepicker.open()
close Manually closes a timepicker timepicker.close() 
        
            
              <mdb-form-control>
                <input
                  mdbInput
                  [mdbTimepicker]="timepicker"
                  type="text"
                  class="form-control"
                  id="exampleTimepicker"
                />
                <label mdbLabel for="exampleTimepicker" class="form-label">Select time</label>
                <mdb-timepicker #timepicker></mdb-timepicker>
              </mdb-form-control>
              <button class="btn btn-primary" (click)="openTimepicker(); $event.stopPropagation()">Open timepicker</button>
            
        
    
        
            
              import { Component, ViewChild } from '@angular/core';
              import { MdbTimepickerComponent } from 'mdb-angular-ui-kit/timepicker';

              @Component({
                selector: 'app-root',
                templateUrl: './app.component.html',
              })
              export class AppComponent {
                @ViewChild('timepicker', { static: true }) timepicker!: MdbTimepickerComponent;

                openTimepicker(): void {
                  this.timepicker.open();
                }
              }