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

Icon input

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

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

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

Disable past

Use the minTime input to disallow past time selection.

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

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

Please provide a valid time
Looks good!
        
            
            <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

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

        
            
          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.

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

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