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 |
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. |