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

Select a time

HTML

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

Select a time

Show code

HTML

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

Select a time

Show code

HTML

<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 toggle icon

Icon input

You can set your custom toggle icon with [icon] input.

Select a time

Show code

HTML

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

Icon template

If you want to use more complex toggle icon syntax you can do it by placing HTML code inside ng-template with mdbTimepickerToggleIcon directive.

Select a time

Show code

HTML

<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"
    ><ng-template mdbTimepickerToggleIcon
      ><i class="fa-angular fab timepicker-icon"></i></ng-template
  ></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

With string PM

With string AM

With string 24h

Show code

HTML

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

Select a time

Show code

HTML

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

Select a time

Show code

HTML

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

Select a time

Show code

HTML

<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

Select a time

Show code

HTML

<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

Select a time

Show code

HTML

<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

Select a time

Show code

HTML

<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

Select a time

Show code

HTML

<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

Select a time

Show code

HTML

<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

Select a time

Show code

HTML

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

Disable past

Use the minTime input to disallow past time selection.

Select a time

Show code

HTML
Typescript

<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 [minTime]="now"></mdb-timepicker>
</mdb-form-control>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  now: string = '';

  ngOnInit(): void {
    // format hours and minutes as two digits
    const hoursString = hours < 10 ? `0${hours}` : `${hours}`;
    const minutesString = minutes < 10 ? `0${minutes}` : `${minutes}`;

    // Set current time in string format
    this.now = `${hoursString}:${minutesString}`;
  }
}

Disable future

Use the maxTime input to disallow future time selection.

Select a time

Show code

HTML
Typescript

<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 [maxTime]="now"></mdb-timepicker>
</mdb-form-control>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  now: string = '';

  ngOnInit(): void {
    // format hours and minutes as two digits
    const hoursString = hours < 10 ? `0${hours}` : `${hours}`;
    const minutesString = minutes < 10 ? `0${minutes}` : `${minutes}`;

    // Set current time in string format
    this.now = `${hoursString}:${minutesString}`;
  }
}

Validation

Use mdbValidate directive to enable validation styles and mdb-error and mdb-success components to display validation messages.

Note: This example uses MDB Angular Validation. Remember to import MdbValidationModule and ReactiveFormsModule to enable reactive forms validation in Angular.

Show code

HTML
Typescript

<form [formGroup]="validationForm" (ngSubmit)="onSubmit()" #form="ngForm">
  <mdb-form-control>
    <input
      mdbInput
      mdbValidate
      [mdbTimepicker]="timepicker"
      formControlName="inputTime"
      type="text"
      class="form-control"
      id="timepicker"
      [ngClass]="{
        'mb-3': form.submitted
      }"
    />
    <label mdbLabel for="timepicker" class="form-label">Select a time</label>
    <mdb-error *ngIf="inputTime?.invalid && (inputTime?.dirty || inputTime?.touched)"
      >Please provide a valid time</mdb-error
    >
    <mdb-success *ngIf="inputTime?.valid && (inputTime?.dirty || inputTime?.touched)"
      >Looks good!</mdb-success
    >
    <mdb-timepicker-toggle
      [mdbTimepickerToggle]="timepicker"
    ></mdb-timepicker-toggle>
    <mdb-timepicker #timepicker></mdb-timepicker>
  </mdb-form-control>
  <button class="btn btn-primary btn-sm mt-3" type="submit">Submit</button>
</form>

import { Component } from '@angular/core';
import { AbstractControl, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})

export class AppComponent {
  validationForm = new UntypedFormGroup({
    inputTime: new UntypedFormControl(null, {
      validators: Validators.required,
      updateOn: 'submit',
    }),
  });

  get inputTime(): AbstractControl {
    return this.validationForm.get('inputTime');
  }

  onSubmit(): void {
    this.validationForm.markAllAsTouched();
  }
}

Timepicker - API

Import

Show code

app.module.ts

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

Inputs

MdbTimepickerComponent

Name	Type	Default	Description
`autoClose`	boolean	`false`	Defines whether component should close automatically after minute selection
`disabled`	boolean	`false`	Defines whether component is disabled
`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
`options`	any	`MdbTimepickerOptions`	Defines timepicker's options
`switchHoursToMinutesOnClick`	boolean	`true`	Allows to enable/disable switching to minutes if hours are selected

MdbTimepickerToggleComponent

Name	Type	Default	Description
`disabled`	boolean	`false`	Defines whether component is disabled
`icon`	string	`'far fa-clock'`	Allows to set custom icon
`mdbTimepickerToggle`	MdbTimepickerComponent	`-`	Input for attaching timepicker component

Outputs

Name	Type	Description
`opened`	EventEmitter<void>	This event fires immediately when the timepicker is opened.
`closed`	EventEmitter<void>	This event fires immediately when the timepicker is closed.
`timeChange`	EventEmitter<MdbTimepickerSelectedTime>	This event fires immediately when the new time is selected.

Show code

HTML
Typescript

<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
    (opened)="onTimepickerOpen()"
    (closed)="onTimepickerClose()"
    (timeChange)="onTimepickerTimeChange($event)"
  ></mdb-timepicker>
</mdb-form-control>

import { Component } from '@angular/core';
import { MdbTimepickerSelectedTime } from 'mdb-angular-ui-kit/timepicker';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  onTimepickerOpen(): void {
    console.log('timepicker open');
  }

  onTimepickerClose(): void {
    console.log('timepicker close');
  }

  onTimepickerTimeChange(event: MdbTimepickerSelectedTime): void {
    console.log('timepicker time changed', event);
  }
}

Methods

Name	Description	Example
`open`	Manually opens a timepicker	`timepicker.open()`
`close`	Manually closes a timepicker	`timepicker.close()`

Show code

HTML
Typescript

<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();
  }
}

Advanced types

MdbTimepickerOptions

Name	Type	Default	Description
`amLabel`	string	`'AM'`	Changes AM text
`cancelLabel`	string	`'Cancel'`	Changes cancel button text
`clearLabel`	string	`'Clear'`	Changes clear button text
`okLabel`	string	`'Ok'`	Changes ok button text
`pmLabel`	string	`'PM'`	Changes PM text

MdbTimepickerSelectedTime

Show code

interface MdbTimepickerSelectedTime {
  h: string;
  m: string;
  ampm: 'AM' | 'PM' | '';
  date?: any;
}

CSS variables

As part of MDB’s evolving CSS variables approach, timepicker now use local CSS variables for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

Timepicker CSS variables are in different classes which belong to this component. To make it easier to use them, you can find below all of the used CSS variables.

Show code

// .timepicker
// &-container
--#{$prefix}timepicker-wrapper-bg: #{$timepicker-wrapper-bg};
--#{$prefix}timepicker-elements-min-width: #{$timepicker-elements-min-width};
--#{$prefix}timepicker-elements-min-height: #{$timepicker-elements-min-height};
--#{$prefix}timepicker-elements-background: #{$timepicker-elements-background};
--#{$prefix}timepicker-elements-border-top-right-radius: #{$timepicker-elements-border-top-right-radius};
--#{$prefix}timepicker-elements-border-top-left-radius: #{$timepicker-elements-border-top-left-radius};
--#{$prefix}timepicker-elements-media-border-bottom-left-radius: #{$timepicker-elements-media-border-bottom-left-radius};
--#{$prefix}timepicker-head-bg: #{$timepicker-head-bg};
--#{$prefix}timepicker-head-height: #{$timepicker-head-height};
--#{$prefix}timepicker-head-border-top-right-radius: #{$timepicker-head-border-top-right-radius};
--#{$prefix}timepicker-head-border-top-left-radius: #{$timepicker-head-border-top-left-radius};
--#{$prefix}timepicker-head-padding-y: #{$timepicker-head-padding-y};
--#{$prefix}timepicker-head-padding-right: #{$timepicker-head-padding-right};
--#{$prefix}timepicker-head-padding-left: #{$timepicker-head-padding-left};
--#{$prefix}timepicker-head-media-padding: #{$timepicker-head-media-padding};
--#{$prefix}timepicker-head-media-padding-right: #{$timepicker-head-media-padding-right};
--#{$prefix}timepicker-head-media-min-height: #{$timepicker-head-media-min-height};
--#{$prefix}timepicker-head-inline-border-bottom-right-radius: #{$timepicker-head-inline-border-bottom-right-radius};
--#{$prefix}timepicker-head-inline-border-bottom-left-radius: #{$timepicker-head-inline-border-bottom-left-radius};
--#{$prefix}timepicker-button-font-size: #{$timepicker-button-font-size};
--#{$prefix}timepicker-button-min-width: #{$timepicker-button-min-width};
--#{$prefix}timepicker-button-font-weight: #{$timepicker-button-font-weight};
--#{$prefix}timepicker-button-line-height: #{$timepicker-button-line-height};
--#{$prefix}timepicker-button-border-radius: #{$timepicker-button-border-radius};
--#{$prefix}timepicker-button-letter-spacing: #{$timepicker-button-letter-spacing};
--#{$prefix}timepicker-button-color: #{$timepicker-button-color};
--#{$prefix}timepicker-button-transition: #{$timepicker-button-transition};
--#{$prefix}timepicker-button-padding-x: #{$timepicker-button-padding-x};
--#{$prefix}timepicker-button-height: #{$timepicker-button-height};
--#{$prefix}timepicker-button-margin-bottom: #{$timepicker-button-margin-bottom};
--#{$prefix}timepicker-button-hover-bg: #{$timepicker-button-hover-bg};
--#{$prefix}timepicker-button-focus-bg: #{$timepicker-button-focus-bg};
--#{$prefix}timepicker-submit-inline-height: #{$timepicker-submit-inline-height};
--#{$prefix}timepicker-submit-inline-min-width: #{$timepicker-submit-inline-min-width};
--#{$prefix}timepicker-submit-inline-margin-left: #{$timepicker-submit-inline-margin-left};
--#{$prefix}timepicker-submit-inline-color: #{$timepicker-submit-inline-color};
--#{$prefix}timepicker-current-font-size: #{$timepicker-current-font-size};
--#{$prefix}timepicker-current-font-weight: #{$timepicker-current-font-weight};
--#{$prefix}timepicker-current-line-height: #{$timepicker-current-line-height};
--#{$prefix}timepicker-current-letter-spacing: #{$timepicker-current-letter-spacing};
--#{$prefix}timepicker-current-color: #{$timepicker-current-color};
--#{$prefix}timepicker-current-opacity: #{$timepicker-current-opacity};
--#{$prefix}timepicker-clock-wrapper-min-width: #{$timepicker-clock-wrapper-min-width};
--#{$prefix}timepicker-clock-wrapper-max-width: #{$timepicker-clock-wrapper-max-width};
--#{$prefix}timepicker-clock-wrapper-min-height: #{$timepicker-clock-wrapper-min-height};
--#{$prefix}timepicker-mode-wrapper-font-size: #{$timepicker-mode-wrapper-font-size};
--#{$prefix}timepicker-mode-wrapper-color: #{$timepicker-mode-wrapper-color};
--#{$prefix}timepicker-clock-inner-top: #{$timepicker-clock-inner-top};
--#{$prefix}timepicker-clock-inner-left: #{$timepicker-clock-inner-left};
--#{$prefix}timepicker-clock-inner-transform: #{$timepicker-clock-inner-transform};
--#{$prefix}timepicker-clock-inner-width: #{$timepicker-clock-inner-width};
--#{$prefix}timepicker-clock-inner-height: #{$timepicker-clock-inner-height};
--#{$prefix}timepicker-time-tips-inner-width: #{$timepicker-time-tips-inner-width};
--#{$prefix}timepicker-time-tips-inner-height: #{$timepicker-time-tips-inner-height};
--#{$prefix}timepicker-time-tips-inner-font-size: #{$timepicker-time-tips-inner-font-size};
--#{$prefix}timepicker-time-tips-inner-font-weight: #{$timepicker-time-tips-inner-font-weight};
--#{$prefix}timepicker-clock-width: #{$timepicker-clock-width};
--#{$prefix}timepicker-clock-height: #{$timepicker-clock-height};
--#{$prefix}timepicker-clock-bg: #{$timepicker-clock-bg};
--#{$prefix}timepicker-time-tips-inner-active-color: #{$timepicker-time-tips-inner-active-color};
--#{$prefix}timepicker-time-tips-inner-active-bg: #{$timepicker-time-tips-inner-active-bg};
--#{$prefix}timepicker-time-tips-inner-active-font-weight: #{$timepicker-time-tips-inner-active-font-weight};
--#{$prefix}timepicker-time-tips-inner-disabled-color: #{$timepicker-time-tips-inner-disabled-color};
--#{$prefix}timepicker-dot-font-weight: #{$timepicker-dot-font-weight};
--#{$prefix}timepicker-dot-line-height: #{$timepicker-dot-line-height};
--#{$prefix}timepicker-dot-letter-spacing: #{$timepicker-dot-letter-spacing};
--#{$prefix}timepicker-dot-color: #{$timepicker-dot-color};
--#{$prefix}timepicker-dot-media-font-size: #{$timepicker-dot-media-font-size};
--#{$prefix}timepicker-dot-media-font-weight: #{$timepicker-dot-media-font-weight};
--#{$prefix}timepicker-dot-font-size: #{$timepicker-dot-font-size};
--#{$prefix}timepicker-dot-opacity: #{$timepicker-dot-opacity};
--#{$prefix}timepicker-current-inline-font-size: #{$timepicker-current-inline-font-size};
--#{$prefix}timepicker-item-width: #{$timepicker-item-width};
--#{$prefix}timepicker-item-height: #{$timepicker-item-height};
--#{$prefix}timepicker-item-padding: #{$timepicker-item-padding};
--#{$prefix}timepicker-item-font-size: #{$timepicker-item-font-size};
--#{$prefix}timepicker-item-middle-dot-top: #{$timepicker-item-middle-dot-top};
--#{$prefix}timepicker-item-middle-dot-left: #{$timepicker-item-middle-dot-left};
--#{$prefix}timepicker-item-middle-dot-width: #{$timepicker-item-middle-dot-width};
--#{$prefix}timepicker-item-middle-dot-height: #{$timepicker-item-middle-dot-height};
--#{$prefix}timepicker-item-middle-dot-transform: #{$timepicker-item-middle-dot-transform};
--#{$prefix}timepicker-item-middle-dot-border-radius: #{$timepicker-item-middle-dot-border-radius};
--#{$prefix}timepicker-item-middle-dot-bg: #{$timepicker-item-middle-dot-bg};
--#{$prefix}timepicker-hand-pointer-bg: #{$timepicker-hand-pointer-bg};
--#{$prefix}timepicker-hand-pointer-bottom: #{$timepicker-hand-pointer-bottom};
--#{$prefix}timepicker-hand-pointer-height: #{$timepicker-hand-pointer-height};
--#{$prefix}timepicker-hand-pointer-left: #{$timepicker-hand-pointer-left};
--#{$prefix}timepicker-hand-pointer-width: #{$timepicker-hand-pointer-width};
--#{$prefix}timepicker-transform-transition: #{$timepicker-transform-transition};
--#{$prefix}timepicker-time-tips-width: #{$timepicker-time-tips-width};
--#{$prefix}timepicker-time-tips-height: #{$timepicker-time-tips-height};
--#{$prefix}timepicker-time-tips-height: #{$timepicker-time-tips-height};
--#{$prefix}timepicker-time-tips-font-size: #{$timepicker-time-tips-font-size};
--#{$prefix}timepicker-time-tips-active-color: #{$timepicker-time-tips-active-color};
--#{$prefix}timepicker-circle-top: #{$timepicker-circle-top};
--#{$prefix}timepicker-circle-left: #{$timepicker-circle-left};
--#{$prefix}timepicker-circle-width: #{$timepicker-circle-width};
--#{$prefix}timepicker-circle-border-width: #{$timepicker-circle-border-width};
--#{$prefix}timepicker-circle-border-color: #{$timepicker-circle-border-color};
--#{$prefix}timepicker-circle-height: #{$timepicker-circle-height};
--#{$prefix}timepicker-hour-mode-color: #{$timepicker-hour-mode-color};
--#{$prefix}timepicker-hour-mode-opacity: #{$timepicker-hour-mode-opacity};
--#{$prefix}timepicker-hour-mode-hover-bg: #{$timepicker-hour-mode-hover-bg};
--#{$prefix}timepicker-hour-mode-font-size: #{$timepicker-hour-mode-font-size};
--#{$prefix}timepicker-hour-mode-active-color: #{$timepicker-hour-mode-active-color};
--#{$prefix}timepicker-footer-border-bottom-left-radius: #{$timepicker-footer-border-bottom-left-radius};
--#{$prefix}timepicker-footer-border-bottom-right-radius: #{$timepicker-footer-border-bottom-right-radius};
--#{$prefix}timepicker-footer-height: #{$timepicker-footer-height};
--#{$prefix}timepicker-footer-padding-x: #{$timepicker-footer-padding-x};
--#{$prefix}timepicker-footer-bg: #{$timepicker-footer-bg};
--#{$prefix}timepicker-container-max-height: #{$timepicker-container-max-height};
--#{$prefix}timepicker-container-box-shadow: #{$box-shadow-4};
--#{$prefix}timepicker-icon-up-down-transition: #{$timepicker-icon-up-down-transition};
--#{$prefix}timepicker-icon-up-down-transform: #{$timepicker-icon-up-down-transform};
--#{$prefix}timepicker-icon-up-down-left: #{$timepicker-icon-up-down-left};
--#{$prefix}timepicker-icon-up-down-width: #{$timepicker-icon-up-down-width};
--#{$prefix}timepicker-icon-up-down-height: #{$timepicker-icon-up-down-height};
--#{$prefix}timepicker-icon-up-top: #{$timepicker-icon-up-top};
--#{$prefix}timepicker-icon-down-bottom: #{$timepicker-icon-down-bottom};
--#{$prefix}timepicker-icon-btn-width: #{$timepicker-icon-btn-width};
--#{$prefix}timepicker-icon-btn-height: #{$timepicker-icon-btn-height};
--#{$prefix}timepicker-input-color: #{$timepicker-input-color};
--#{$prefix}timepicker-clock-animation: #{$timepicker-clock-animation};

// &-wrapper-inline
--#{$prefix}timepicker-wrapper-inline-border-radius: #{$timepicker-wrapper-inline-border-radius};

// @media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape)
--#{$prefix}timepicker-elements-media-border-bottom-left-radius

// &-toggle-button
--#{$prefix}timepicker-btn-icon-right: #{$timepicker-btn-icon-right};
--#{$prefix}timepicker-btn-icon-top: #{$timepicker-btn-icon-top};
--#{$prefix}timepicker-btn-icon-transform: #{$timepicker-btn-icon-transform};
--#{$prefix}timepicker-btn-icon-transition: #{$timepicker-btn-icon-transition};
--#{$prefix}timepicker-btn-icon-hover-color: #{$timepicker-btn-icon-hover-color};
--#{$prefix}timepicker-btn-icon-focus-color: #{$timepicker-btn-icon-focus-color};

// .timepicker-modal
--#{$prefix}timepicker-zindex: #{$timepicker-zindex};

SCSS variables

Show code

SCSS

$timepicker-zindex: 1065;

$timepicker-wrapper-bg: rgba(0, 0, 0, 0.4);

$timepicker-wrapper-inline-border-radius: 0.5rem;

$timepicker-elements-min-width: 310px;
$timepicker-elements-min-height: 325px;
$timepicker-elements-background: $white;
$timepicker-elements-border-top-right-radius: 0.6rem;
$timepicker-elements-border-top-left-radius: 0.6rem;
$timepicker-elements-media-border-bottom-left-radius: 0;

$timepicker-head-bg: $primary;
$timepicker-head-height: 100px;
$timepicker-head-border-top-right-radius: 0.5rem;
$timepicker-head-border-top-left-radius: 0.5rem;
$timepicker-head-padding-y: 10px;
$timepicker-head-padding-right: 24px;
$timepicker-head-padding-left: 50px;

$timepicker-head-media-padding: 10px;
$timepicker-head-media-padding-right: 10px;
$timepicker-head-media-min-height: 305px;
$timepicker-head-inline-border-bottom-right-radius: 0.5rem;
$timepicker-head-inline-border-bottom-left-radius: 0.5rem;

$timepicker-button-font-size: 0.8rem;
$timepicker-button-min-width: 64px;
$timepicker-button-font-weight: 500;
$timepicker-button-line-height: 40px;
$timepicker-button-border-radius: 10px;
$timepicker-button-letter-spacing: 0.1rem;
$timepicker-button-color: $primary;
$timepicker-button-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
  box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
$timepicker-button-hover-bg: rgba(0, 0, 0, 0.08);
$timepicker-button-focus-bg: $timepicker-button-hover-bg;
$timepicker-button-padding-x: 10px;
$timepicker-button-height: 40px;
$timepicker-button-margin-bottom: 10px;

$timepicker-submit-inline-height: 48px;
$timepicker-submit-inline-min-width: 48px;
$timepicker-submit-inline-margin-left: 30px;
$timepicker-submit-inline-color: $white;

$timepicker-current-font-size: 3.75rem;
$timepicker-current-font-weight: 300;
$timepicker-current-line-height: 1.2;
$timepicker-current-letter-spacing: -0.00833em;
$timepicker-current-color: $white;
$timepicker-current-opacity: 0.54;

$timepicker-mode-wrapper-font-size: 18px;
$timepicker-mode-wrapper-color: rgba(255, 255, 255, 0.54);

$timepicker-clock-wrapper-min-width: 310px;
$timepicker-clock-wrapper-max-width: 325px;
$timepicker-clock-wrapper-min-height: 305px;

$timepicker-clock-animation: show-up-clock 350ms linear;
$timepicker-clock-width: 260px;
$timepicker-clock-height: 260px;
$timepicker-clock-bg: rgba(0, 0, 0, 0.07);

$timepicker-clock-inner-top: 50%;
$timepicker-clock-inner-left: 50%;
$timepicker-clock-inner-transform: translate(-50%, -50%);
$timepicker-clock-inner-width: 160px;
$timepicker-clock-inner-height: 160px;

$timepicker-time-tips-inner-width: 32px;
$timepicker-time-tips-inner-height: 32px;
$timepicker-time-tips-inner-font-size: 1.1rem;
$timepicker-time-tips-inner-font-weight: 300;
$timepicker-time-tips-inner-active-color: $white;
$timepicker-time-tips-inner-active-bg: $primary;
$timepicker-time-tips-inner-active-font-weight: 400;
$timepicker-time-tips-inner-disabled-color: #b3afaf;

$timepicker-dot-font-weight: 300;
$timepicker-dot-line-height: 1.2;
$timepicker-dot-letter-spacing: -0.00833em;
$timepicker-dot-color: $white;
$timepicker-dot-font-size: 3.75rem;
$timepicker-dot-opacity: 0.54;
$timepicker-dot-media-font-size: 3rem;
$timepicker-dot-media-font-weight: 400;

$timepicker-current-inline-font-size: 2.5rem;

$timepicker-item-width: 20px;
$timepicker-item-height: 20px;
$timepicker-item-padding: 10px;
$timepicker-item-font-size: 1.1em;

$timepicker-item-middle-dot-top: 50%;
$timepicker-item-middle-dot-left: 50%;
$timepicker-item-middle-dot-width: 6px;
$timepicker-item-middle-dot-height: $timepicker-item-middle-dot-width;
$timepicker-item-middle-dot-transform: translate(-50%, -50%);
$timepicker-item-middle-dot-border-radius: 50%;
$timepicker-item-middle-dot-bg: $primary;

$timepicker-hand-pointer-bg: $primary;
$timepicker-hand-pointer-bottom: 50%;
$timepicker-hand-pointer-height: 40%;
$timepicker-hand-pointer-left: calc(50% - 1px);
$timepicker-hand-pointer-width: 2px;

$timepicker-transform-transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
  height 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;

$timepicker-time-tips-width: 32px;
$timepicker-time-tips-height: 32px;
$timepicker-time-tips-font-size: 1.1rem;
$timepicker-time-tips-active-color: $white;

$timepicker-circle-top: -21px;
$timepicker-circle-left: -15px;
$timepicker-circle-width: 4px;
$timepicker-circle-border-width: 14px;
$timepicker-circle-border-color: $primary;
$timepicker-circle-height: 4px;

$timepicker-hour-mode-color: $white;
$timepicker-hour-mode-opacity: 0.54;
$timepicker-hour-mode-hover-bg: rgba(0, 0, 0, 0.15);
$timepicker-hour-mode-active-color: $white;
$timepicker-hour-mode-font-size: 2.5rem;

$timepicker-footer-border-bottom-left-radius: 0.5rem;
$timepicker-footer-border-bottom-right-radius: 0.5rem;
$timepicker-footer-height: 56px;
$timepicker-footer-padding-x: 12px;
$timepicker-footer-bg: $white;

$timepicker-container-max-height: calc(100% - 64px);

$timepicker-icon-up-down-transition: 0.2s ease all;
$timepicker-icon-up-down-transform: translate(-50%, -50%);
$timepicker-icon-up-down-left: 50%;
$timepicker-icon-up-down-width: 30px;
$timepicker-icon-up-down-height: 30px;
$timepicker-icon-up-top: -35px;
$timepicker-icon-down-bottom: -47px;

$timepicker-icon-btn-width: 30px;
$timepicker-icon-btn-height: 30px;
$timepicker-input-color: $primary;

$timepicker-btn-icon-right: -10px;
$timepicker-btn-icon-transform: translate(-50%, -50%);
$timepicker-btn-icon-top: 50%;
$timepicker-btn-icon-transition: all 0.3s ease;
$timepicker-btn-icon-hover-color: $primary;
$timepicker-btn-icon-focus-color: $primary;

Timepicker

Angular Bootstrap 5 Timepicker component

Basic example

Inline Timepicker with 12h

Inline Timepicker with 24h

Custom toggle icon

Icon input

Icon template

Default time

Format 24h

Just Input

Increment

Max time

Max time with PM

Max time with AM

Min time

Min time with PM

Min time with AM

Disable past

Disable future

Validation

Related resources

Timepicker - API

Import

Inputs

MdbTimepickerComponent

MdbTimepickerToggleComponent

Outputs

Methods

Advanced types

MdbTimepickerOptions

MdbTimepickerSelectedTime

CSS variables

SCSS variables