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


Inline Timepicker with 12h

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


Inline Timepicker with 24h

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


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.


Default time

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

  • 12:34
  • 12:34 PM
  • 12:34 AM

Format 24h

Timepicker allows you to use time format with 24 hours.


Just Input

You can set a timepicker to just an input.


Increment

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


Max time


Max time with PM


Max time with AM


Min time


Min time with PM


Min time with AM

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

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.