Timepicker
Bootstrap 5 Timepicker component
Use MDB custom Timepicker component to select time.
Note: Read the API tab to find all available options and advanced customization
*
*
UMD autoinits are enabled
by default. This means that you don't need to initialize
the component manually. However if you are using MDBootstrap ES format then you should pass
the required components to the initMDB
method.
Basic example
MDB allows you to automatically initialize Timepicker when the page is loaded. To do that you need to
add data-mdb-timepicker-init
attribute in your picker wrapper.
<div class="form-outline timepicker" data-mdb-timepicker-init data-mdb-input-init>
<input type="text" class="form-control" id="form11" />
<label class="form-label" for="form11">Select a time</label>
</div>
// Initialization for ES Users
import { Input, Timepicker, initMDB } from "mdb-ui-kit";
initMDB({ Input, Timepicker });
Inline Timepicker with 12h
MDB Timepicker allows for the use of an inline version of the timepicker. The default version is in 12-hour format.
<div class="form-outline timepicker-inline-12" data-mdb-input-init>
<input type="text" class="form-control" id="form41" />
<label class="form-label" for="form41">Select a time</label>
</div>
// Initialization for ES Users
import { Input, Timepicker, initMDB } from "mdb-ui-kit";
initMDB({ Input, Timepicker });
const pickerInline = document.querySelector('.timepicker-inline-12');
const timepickerMaxMin = new Timepicker(pickerInline, {
format12:true,
inline: true
});
const pickerInline = document.querySelector('.timepicker-inline-12');
const timepickerMaxMin = new mdb.Timepicker(pickerInline, {
format12:true,
inline: true
});
Inline Timepicker with 24h
MDB Timepicker enables you to utilize an inline timepicker with a 24-hour format. To achieve this, set the format24
option to true.
<div class="form-outline timepicker-inline-24" data-mdb-input-init>
<input type="text" class="form-control" id="form43" />
<label class="form-label" for="form43">Select a time</label>
</div>
// Initialization for ES Users
import { Input, Timepicker, initMDB } from "mdb-ui-kit";
initMDB({ Input, Timepicker });
const pickerInline = document.querySelector('.timepicker-inline-24');
const timepickerMaxMin = new Timepicker(pickerInline, {
format24:true,
inline: true
});
const pickerInline = document.querySelector('.timepicker-inline-24');
const timepickerMaxMin = new mdb.Timepicker(pickerInline, {
format24:true,
inline: 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. You have to add class
.timepicker-toggle-button
to your element with data-mdb-toggle
attribute and
.timepicker-icon
to your icon.
With icon
<div class="form-outline timepicker" data-mdb-timepicker-init data-mdb-input-init>
<input type="text" class="form-control" id="form2" />
<label class="form-label" for="form2">Select a time</label>
<i
class="fab fa-react fa-2x timepicker-icon timepicker-toggle-button"
tabindex="0"
type="button"
role="button"
data-mdb-toggle="timepicker"
></i>
</div>
// Initialization for ES Users
import { Input, Timepicker, initMDB } from "mdb-ui-kit";
initMDB({ Input, Timepicker });
Without icon
MDB Timepicker allows you to configure the input without an icon. You can achieve this by setting
data-mdb-with-icon
attribute to false or using the withIcon
option with a value of false when initializing the
timepicker with JavaScript
<div class="timepicker" data-mdb-with-icon="false" data-mdb-timepicker-init>
<div class="form-outline" data-mdb-input-init >
<input type="text" class="form-control" id="form12" />
<label class="form-label" for="form12">Select a time</label>
</div>
<button class="btn btn-primary mt-2" data-mdb-toggle="timepicker">
Toggle Timepicker
</button>
</div>
<div id="timepicker-without-icon" data-mdb-with-icon="false" class="mt-3">
<div class="form-outline" data-mdb-input-init >
<input type="text" class="form-control" id="form13" />
<label class="form-label" for="form13">Select a time</label>
</div>
<button class="btn btn-primary mt-2" data-mdb-toggle="timepicker-without-icon">
Toggle Timepicker
</button>
</div>
// Initialization for ES Users
import { Input, Timepicker, initMDB } from "mdb-ui-kit";
initMDB({ Input, Timepicker });
const wiTimepicker = document.querySelector('#timepicker-without-icon');
const wiInitTimepicker = new Timepicker(wiTimepicker, {
withIcon: false
})
const wiTimepicker = document.querySelector('#timepicker-without-icon');
const wiInitTimepicker = new mdb.Timepicker(wiTimepicker, {
withIcon: false
});
Default time
MDB Timepicker allows you to initialize a default time in both the picker and input. You can set it using the
defaultTime
option, which accepts strings like:
- 12:34
- 12:34 PM
- 12:34 AM
and also new Date() format like:
- new Date()
- new Date().toLocaleTimeString([],{timeStyle: 'short'})
Note: If you are using string with PM/AM, you have to have option format24 set to false otherwise your default time will be formate to 24h. Also if you are using string without PM/AM and you would like have 24h format hour you have to set option format24 to true. If you will only put a string without PM/AM and format24 set to false you are gonna have a timepicker with 12h and format set to AM with default.
<div class="form-outline timepicker-default-time-string-pm" data-mdb-input-init>
<input type="text" class="form-control" id="form27" />
<label class="form-label" for="form27">With string PM</label>
</div>
<div class="form-outline timepicker-default-time-string-am" data-mdb-input-init>
<input type="text" class="form-control" id="form28" />
<label class="form-label" for="form28">With string AM</label>
</div>
<div class="form-outline timepicker-default-time-string-without-pm-am" data-mdb-input-init>
<input type="text" class="form-control" id="form29" />
<label class="form-label" for="form29">With string without AM/PM</label>
</div>
<div class="form-outline timepicker-default-time-string-24h" data-mdb-input-init>
<input type="text" class="form-control" id="form210" />
<label class="form-label" for="form210">With string 24h</label>
</div>
<div class="form-outline timepicker-default-time-with-new-date-12h" data-mdb-input-init>
<input type="text" class="form-control" id="form211" />
<label class="form-label" for="form211">With new Date with 12h</label>
</div>
<div class="form-outline timepicker-default-time-with-new-date-24h" data-mdb-input-init>
<input type="text" class="form-control" id="form212" />
<label class="form-label" for="form212">With new Date with 24h</label>
</div>
// Initialization for ES Users
import { Input, Timepicker, initMDB } from "mdb-ui-kit";
initMDB({ Input, Timepicker });
//Default time string PM
const pickerStartedPM = document.querySelector('.timepicker-default-time-string-pm ');
const tmStartedPM = new Timepicker(pickerStartedPM, {
defaultTime: '02:12 PM'
});
//Default time string AM
const pickerStartedAM = document.querySelector('.timepicker-default-time-string-am');
const tmStartedAM = new Timepicker(pickerStartedAM, {
defaultTime: '05:12 AM'
});
//Default time without PM/AM
const pickerStartedWithoutPmAm = document.querySelector(
'.timepicker-default-time-string-without-pm-am'
);
const tmStartedWithoutPmAm = new Timepicker(pickerStartedWithoutPmAm, {
defaultTime: '05:12',
});
//Default time with 24h
const pickerStartedWith24h = document.querySelector('.timepicker-default-time-string-24h');
const tmStartedWith24h = new Timepicker(pickerStartedWith24h, {
defaultTime: '23:44',
format24: true,
});
//Default time date 12h
const pickerStartedWithDate12h = document.querySelector('.timepicker-default-time-with-new-date-12h');
const tmStartedWithDate12h = new Timepicker(pickerStartedWithDate12h, {
defaultTime: new Date(),
});
//Default time date 24h
const pickerStartedWithDate24h = document.querySelector('.timepicker-default-time-with-new-date-24h');
const tmStartedWithDate24h = new Timepicker(pickerStartedWithDate24h, {
defaultTime: new Date(),
format24: true,
});
//Default time string PM
const pickerStartedPM = document.querySelector('.timepicker-default-time-string-pm ');
const tmStartedPM = new mdb.Timepicker(pickerStartedPM, {
defaultTime: '02:12 PM'
});
//Default time string AM
const pickerStartedAM = document.querySelector('.timepicker-default-time-string-am');
const tmStartedAM = new mdb.Timepicker(pickerStartedAM, {
defaultTime: '05:12 AM'
});
//Default time without PM/AM
const pickerStartedWithoutPmAm = document.querySelector(
'.timepicker-default-time-string-without-pm-am'
);
const tmStartedWithoutPmAm = new mdb.Timepicker(pickerStartedWithoutPmAm, {
defaultTime: '05:12',
});
//Default time with 24h
const pickerStartedWith24h = document.querySelector('.timepicker-default-time-string-24h');
const tmStartedWith24h = new mdb.Timepicker(pickerStartedWith24h, {
defaultTime: '23:44',
format24: true,
});
//Default time date 12h
const pickerStartedWithDate12h = document.querySelector('.timepicker-default-time-with-new-date-12h');
const tmStartedWithDate12h = new mdb.Timepicker(pickerStartedWithDate12h, {
defaultTime: new Date(),
});
//Default time date 24h
const pickerStartedWithDate24h = document.querySelector('.timepicker-default-time-with-new-date-24h');
const tmStartedWithDate24h = new mdb.Timepicker(pickerStartedWithDate24h, {
defaultTime: new Date(),
format24: true,
});
Handle input value
If you want handle input value upon modal approve, you have to add a listener for the custom event to the selected picker.
<div class="form-outline" id="timepicker-value" data-mdb-input-init>
<input type="text" class="form-control" />
<label class="form-label" for="form3">Select a time</label>
</div>
<div class="my-2">Input value: <span id="span-input-value"></span></div>
// Initialization for ES Users
import { Input, Timepicker, initMDB } from "mdb-ui-kit";
initMDB({ Input, Timepicker });
const timepickerValue = document.querySelector('#timepicker-value');
const tminputValue = new Timepicker(timepickerValue);
timepickerValue.addEventListener('valueChanged.mdb.timepicker', (input) => {
const valueDiv = document.querySelector('#span-input-value');
valueDiv.innerText = input.target.value;
});
const timepickerValue = document.querySelector('#timepicker-value');
const tminputValue = new mdb.Timepicker(timepickerValue);
timepickerValue.addEventListener('valueChanged.mdb.timepicker', (input) => {
const valueDiv = document.querySelector('#span-input-value');
valueDiv.innerText = input.target.value;
});
Format 24h
The Timepicker allows you to use the 24-hour time format. You can set it using JavaScript options or by using
data-mdb-format24
and setting it to true.
<div class="form-outline timepicker" data-mdb-timepicker-init data-mdb-input-init data-mdb-format24="true">
<input type="text" class="form-control" data-mdb-toggle="timepicker" />
<label class="form-label" for="form3">Select a time</label>
</div>
// Initialization for ES Users
import { Input, Timepicker, initMDB } from "mdb-ui-kit";
initMDB({ Input, Timepicker });
Just Input
You can set the Timepicker to open on input click.
<div class="form-outline timepicker" data-mdb-timepicker-init data-mdb-with-icon="false" data-mdb-input-init>
<input type="text" class="form-control" id="form22" data-mdb-toggle="timepicker" />
<label class="form-label" for="form22">Select a time</label>
</div>
// Initialization for ES Users
import { Input, Timepicker, initMDB } from "mdb-ui-kit";
initMDB({ Input, Timepicker });
Increment
You can set a increment value by 5 to a minutes.
<div class="form-outline timepicker-inc" data-mdb-input-init>
<input type="text" class="form-control" id="form45" />
<label class="form-label" for="form45">Select a time</label>
</div>
// Initialization for ES Users
import { Input, Timepicker, initMDB } from "mdb-ui-kit";
initMDB({ Input, Timepicker });
const pickerInc = document.querySelector('.timepicker-inc');
const timepickerInc = new Timepicker(pickerInc, {
increment: true,
});
const pickerInc = document.querySelector('.timepicker-inc');
const timepickerInc = new mdb.Timepicker(pickerInc, {
increment: true,
});
Max time
Use the max
option to restrict the selection of time beyond the chosen hour.
<div class="form-outline timepicker-max-time" data-mdb-input-init>
<input type="text" class="form-control" id="form46" />
<label class="form-label" for="form46">Select a time</label>
</div>
// Initialization for ES Users
import { Input, Timepicker, initMDB } from "mdb-ui-kit";
initMDB({ Input, Timepicker });
const pickerMaxTime = document.querySelector('.timepicker-max-time');
const timepickerMaxTime = new Timepicker(pickerMaxTime, {
maxTime: '6:35'
});
const pickerMaxTime = document.querySelector('.timepicker-max-time');
const timepickerMaxTime = new mdb.Timepicker(pickerMaxTime, {
maxTime: '6:35'
});
Max time with PM
Use the max
option to restrict the selection of time beyond the chosen hour.
<div class="form-outline timepicker-max-time-pm" data-mdb-input-init>
<input type="text" class="form-control" id="form48" />
<label class="form-label" for="form48">Select a time</label>
</div>
// Initialization for ES Users
import { Input, Timepicker, initMDB } from "mdb-ui-kit";
initMDB({ Input, Timepicker });
const pickerMaxTimePM = document.querySelector('.timepicker-max-time-pm');
const tmMaxPm = new Timepicker(pickerMaxTimePM, {
maxTime: '6:35 PM'
});
const pickerMaxTimePM = document.querySelector('.timepicker-max-time-pm');
const tmMaxPm = new mdb.Timepicker(pickerMaxTimePM, {
maxTime: '6:35 PM'
});
Max time with AM
Use the max
option to restrict the selection of time beyond the chosen hour.
<div class="form-outline timepicker-max-time-am" data-mdb-input-init>
<input type="text" class="form-control" id="form410" />
<label class="form-label" for="form410">Select a time</label>
</div>
// Initialization for ES Users
import { Input, Timepicker, initMDB } from "mdb-ui-kit";
initMDB({ Input, Timepicker });
const pickerMaxTimeAM = document.querySelector('.timepicker-max-time-am');
const tmMaxAm = new Timepicker(pickerMaxTimeAM, {
maxTime: '6:35 AM'
});
const pickerMaxTimeAM = document.querySelector('.timepicker-max-time-am');
const tmMaxAm = new mdb.Timepicker(pickerMaxTimeAM, {
maxTime: '6:35 AM'
});
Min time
Use the max
option to restrict the selection of time before the chosen hour.
<div class="form-outline timepicker-min-time" data-mdb-input-init>
<input type="text" class="form-control" id="form412" />
<label class="form-label" for="form412">Select a time</label>
</div>
// Initialization for ES Users
import { Input, Timepicker, initMDB } from "mdb-ui-kit";
initMDB({ Input, Timepicker });
const pickerMinTime = document.querySelector('.timepicker-min-time');
const timepickerMinTime = new Timepicker(pickerMinTime, {
minTime: '10:15'
});
const pickerMinTime = document.querySelector('.timepicker-min-time');
const timepickerMinTime = new mdb.Timepicker(pickerMinTime, {
minTime: '10:15'
});
Min time with PM
Use the max
option to restrict the selection of time before the chosen hour.
<div class="form-outline timepicker-min-time-pm" data-mdb-input-init>
<input type="text" class="form-control" id="form414" />
<label class="form-label" for="form414">Select a time</label>
</div>
// Initialization for ES Users
import { Input, Timepicker, initMDB } from "mdb-ui-kit";
initMDB({ Input, Timepicker });
const pickerMinTimePM = document.querySelector('.timepicker-min-time-pm');
const tmMinPm = new Timepicker(pickerMinTimePM, {
minTime: '6:35 PM'
});
const pickerMinTimePM = document.querySelector('.timepicker-min-time-pm');
const tmMinPm = new mdb.Timepicker(pickerMinTimePM, {
minTime: '6:35 PM'
});
Min time with AM
Use the max
option to restrict the selection of time before the chosen hour.
<div class="form-outline timepicker-min-time-am" style="width:22rem" data-mdb-input-init>
<input type="text" class="form-control" id="form416" />
<label class="form-label" for="form416">Select a time</label>
</div>
// Initialization for ES Users
import { Input, Timepicker, initMDB } from "mdb-ui-kit";
initMDB({ Input, Timepicker });
const pickerMinTimeAM = document.querySelector('.timepicker-min-time-am');
const tmMinAm = new Timepicker(pickerMinTimeAM, {
minTime: '6:35 AM'
});
const pickerMinTimeAM = document.querySelector('.timepicker-min-time-am');
const tmMinAm = new mdb.Timepicker(pickerMinTimeAM, {
minTime: '6:35 AM'
});
Disable past
Use the disablePast
option to restrict the selection of time that has already passed.
<div class="form-outline timepicker-disable-past" data-mdb-input-init>
<input type="text" class="form-control" id="form4" />
<label class="form-label" for="form4">Select a time</label>
</div>
// Initialization for ES Users
import { Input, Timepicker, initMDB } from "mdb-ui-kit";
initMDB({ Input, Timepicker });
const pickerDisablePast = document.querySelector('.timepicker-disable-past');
const timepickerDisablePast = new Timepicker(pickerDisablePast, {
disablePast: true
});
const pickerDisablePast = document.querySelector('.timepicker-disable-past');
const timepickerDisablePast = new mdb.Timepicker(pickerDisablePast, {
disablePast: true
});
Disable future
Use the disableFuture
option to restrict the selection of times in the future.
<div class="form-outline timepicker-disable-future" data-mdb-input-init>
<input type="text" class="form-control" id="form5" />
<label class="form-label" for="form5">Select a time</label>
</div>
// Initialization for ES Users
import { Input, Timepicker, initMDB } from "mdb-ui-kit";
initMDB({ Input, Timepicker });
const pickerDisableFuture = document.querySelector('.timepicker-disable-future');
const timepickerDisableFuture = new Timepicker(pickerDisableFuture, {
disableFuture: true
});
const pickerDisableFuture = document.querySelector('.timepicker-disable-future');
const timepickerDisableFuture = new mdb.Timepicker(pickerDisableFuture, {
disableFuture: true
});
Accessibility
We added proper aria attributes to the timepicker controls to make the component accessible. It's possible to change the values of those attributes by modyfing the component options:
amLabel: 'AM',
cancelLabel: 'Cancel',
clearLabel: 'Clear',
okLabel: 'Ok',
pmLabel: 'PM',
Timepicker - API
Import
Importing components depends on how your application works. If you intend to use the MDBootstrap ES
format, you must
first import the component and then initialize it with the initMDB
method. If you are going to use the UMD
format,
just import the mdb-ui-kit
package.
import { Timepicker, initMDB } from "mdb-ui-kit";
initMDB({ Timepicker });
import "mdb-ui-kit"
Usage
Via data attributes
Using the Timepicker component doesn't require any additional JavaScript code - simply add
data-mdb-timepicker-init
attribute to
.form-outline
and use other data attributes to set all options.
For ES
format, you must first import and call the initMDB
method.
<div class="form-outline timepicker" data-mdb-timepicker-init data-mdb-input-init>
<input type="text" class="form-control" id="form1" />
<label class="form-label" for="form1">Example label</label>
</div>
Via JavaScript
const myTimepicker = new Timepicker(document.getElementById('wrapper-id'), options)
const myTimepicker = new mdb.Timepicker(document.getElementById('wrapper-id'), options)
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to
data-mdb-
, as in data-mdb-body-id=""
.
Name | Type | Default | Description |
---|---|---|---|
animations
|
Boolean | true |
Enables or disables animations for the timepicker. |
bodyId |
String | '' |
Allows to set Timepicker modal body ID. |
cancelLabel |
String | 'Cancel' |
Text of cancel button. |
clearLabel |
String | 'Clear' |
Text of clear button. |
closeModalOnBackdropClick |
Boolean | true |
Sets if a backdrop click will close the picker. |
closeModalOnMinutesClick |
Boolean | false |
Allows to close modal if minutes are selected. |
container |
String | 'body' |
Allows to set the parent element for the timepicker. |
defaultTime |
String | Date | Number | '' |
Allows to initialize a default time in the picker and input. |
disableFuture |
Boolean | false |
Sets constraints to exclude future times from selection. |
disablePast |
Boolean | false |
Sets constraints to exclude times that have already passed from selection. |
disabled |
Boolean | false |
Set a disabled attribute to input in wrapper. |
footerId |
String | '' |
Allows to set Timepicker modal footer ID. |
format12 |
Boolean | true |
Allows to use format 12h. |
format24 |
Boolean | false |
Allows to use format 24h. |
headId |
String | '' |
Allows to set Timepicker modal head ID. |
increment |
Boolean | false |
Allows to set increment minutes by 5. |
inline |
Boolean | false |
Allows to use a inline version of timepicker. |
minTime |
String | Date | null | '' |
Allows to set min time for picker. It accepts minutes and optionally AM/PM format. |
maxTime |
String | Date | null | '' |
Allows to set max time for picker. It accepts minutes and optionally AM/PM format. |
modalId |
String | '' |
Allows to set Timepicker modal ID. |
okLabel |
String | 'Ok' |
Allows to change a text inside submit button. |
overflowHidden |
Boolean | true |
Allows to disable/enable a overflow hidden to body if modal is shown. |
pickerId |
String | '' |
Allows to set Timepicker picker ID. |
readOnly |
Boolean | false |
Allows to set readonly property to input inside wrapper. |
showClearBtn |
Boolean | true |
Allows to attach/remove clear button in modal. |
switchHoursToMinutesOnClick |
Boolean | true |
Allows to enable/disable switching to minutes if hours are selected. |
withIcon |
Boolean | true |
Allows to enable/disable append a icon to input. |
iconClass |
String | 'far fa-clock fa-sm timepicker-icon' |
Allows to set custom classes to timepicker icon. |
pmLabel |
String | 'PM' |
Allows to set custom text to PM button. |
amLabel |
String | 'AM' |
Allows to set custom text to AM button. |
Methods
Name | Description | Example |
---|---|---|
open |
Manually opens a timepicker. |
myTimepicker.open()
|
close |
Manually closes a timepicker. |
myTimepicker.close()
|
dispose
|
Destroy timepicker with this method. |
myTimepicker.dispose()
|
getInstance
|
Static method which allows you to get the timepicker instance associated to a DOM element. |
Timepicker.getInstance(myTimepicker)
|
getOrCreateInstance
|
Static method which returns the timepicker instance associated to a DOM element or create a new one in case it wasn't initialized. |
Timepicker.getOrCreateInstance(myTimepicker)
|
update
|
Updates options of a timepicker instance. |
Timepicker.update({inline: true})
|
const timepickerEl = document.getElementById('myTimepicker')
const timepicker = new Timepicker(timepickerEl)
timepicker.dispose();
const timepickerEl = document.getElementById('myTimepicker')
const timepicker = new mdb.Timepicker(timepickerEl)
timepicker.dispose();
Events
Name | Description |
---|---|
clear.mdb.timepicker
|
This event fires when the clear button is clicked. |
valueChanged.mdb.timepicker
|
This event fires immediately when the new input value is set. |
open.mdb.timepicker
|
This event fires immediately when the timepicker is opened. |
close.mdb.timepicker
|
This event fires immediately when the timepicker is closed. |
const myTimepicker = document.getElementById('myTimepicker')
myTimepicker.addEventListener('valueChanged.mdb.timepicker', (e) => {
// do something...
})
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
// &-wrapper
--#{$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-clock-wrapper-text-color: #{$timepicker-clock-wrapper-text-color};
--#{$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-circle-active-background-color: #{$timepicker-circle-active-background-color};
--#{$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: var(--#{$prefix}surface-bg);
$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: var(--#{$prefix}picker-header-bg);
$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: var(--#{$prefix}surface-color);
$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(var(--#{$prefix}emphasis-color-rgb), 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: color-contrast($primary);
$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-wrapper-text-color: var(--#{$prefix}surface-color);
$timepicker-clock-animation: show-up-clock 350ms linear;
$timepicker-clock-width: 260px;
$timepicker-clock-height: 260px;
$timepicker-clock-bg: var(--#{$prefix}timepicker-clock-face-bg);
$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: color-contrast($primary);
$timepicker-time-tips-inner-active-bg: $primary;
$timepicker-time-tips-inner-active-font-weight: 400;
$timepicker-time-tips-inner-disabled-color: rgba(var(--#{$prefix}surface-color-rgb), 0.5);
$timepicker-dot-font-weight: 300;
$timepicker-dot-line-height: 1.2;
$timepicker-dot-letter-spacing: -0.00833em;
$timepicker-dot-color: color-contrast($primary);
$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-circle-active-background-color: color-contrast($primary);
$timepicker-hour-mode-color: color-contrast($primary);
$timepicker-hour-mode-opacity: 0.54;
$timepicker-hour-mode-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), 0.15);
$timepicker-hour-mode-active-color: color-contrast($primary);
$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: var(--#{$prefix}surface-bg);
$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;