Skip to content
On this page

Timepicker ​

An input with a simple dropdown/modal for selecting a time, uses native timepicker for mobile

Examples ​

Base

Selected: Thu Sep 21 2023 13:06:39 GMT+0000 (Coordinated Universal Time)

Show code

Inline

Show code

Min/Max date

Show code

Slot

Show code

Granularity

Show code

Class props ​

'Classes applied to the element'
How does the Class props inspector work?
Class propDescriptionPropsSuffixes
boxClassClass of the Timepicker component box where you choose the date.
dropdownClassesClasses to apply on dropdown. More detail here
footerClassClass of the Timepicker footer.
inputClassesClasses to apply on internal input. More detail here
mobileClassClass of the Table when on mobile.
πŸ‘‰ Switch to mobile view to see it in action!
rootClassClass of the root element.
selectClassesClasses to apply on select. More detail here
separatorClassClass of the Timepicker separator.
sizeClassClass of the Timepicker component size.sizesmall
medium
large

Timepicker component ​

html
<o-timepicker></o-timepicker>

Props ​

Prop nameDescriptionTypeValuesDefault
appendToBodyboolean-
autocompleteNative options to use in HTML5 validationstring-
defaultMinutesnumber-
defaultSecondsnumber-
disabledboolean-
editableboolean-
enableSecondsboolean-
expandedMakes input full width when inside a grouped or addon fieldboolean-
hourFormatstring-
iconIcon name to be addedstring-
iconPackIcon pack to usestringmdi, fa, fas and any other custom icon pack
incrementHoursnumber-1
incrementMinutesnumber-1
incrementSecondsnumber-1
inlineboolean-
maxTimedate-
maxlengthSame as native maxlength, plus character counternumber|string-
minTimedate-
mobileBreakpointMobile breakpoint as max-width valuestring-
mobileNativeboolean-
From config:
timepicker: {
Β Β mobileNative: true
}
openOnFocusboolean-
overrideboolean-
placeholderstring-
positionstring-
resetOnMeridianChangeboolean-false
roundedMakes the element roundedboolean-
sizeSize of button, optionalstringsmall, medium, large
statusIconShow status icon using field and variant propboolean-
From config:
{
Β Β  "statusIcon": true
}
timeCreatorfunc-Default function (see source code)
timeFormatterfunc-Default function (see source code)
timeParserfunc-Default function (see source code)
unselectableTimesarray-
useHtml5ValidationEnable html 5 native validationboolean-
From config:
{
Β Β  "useHtml5Validation": true
}
v-modeldate-
validationMessageThe message which is shown when a validation error occursstring-

Events ​

Event namePropertiesDescription
blur
focus
invalid
update:modelValue

Slots ​

NameDescriptionBindings
trigger
default

Sass variables ​

Current theme ➜ Oruga Base

SASS VariableDefault
$timepicker-font-size$base-font-size
$timepicker-box-line-height$base-line-height
$timepicker-box-padding0.375rem 1rem
$timepicker-footer-padding0 0.5rem
$timepicker-footer-margin0.875rem 0 0 0
$timepicker-select-line-height$base-line-height
$timepicker-select-padding$control-padding-vertical $control-padding-horizontal
$timepicker-select-color#363636
$timepicker-select-font-weight600
$timepicker-select-placeholder-opacity$base-disabled-opacity
$timepicker-separator-font-weight600

See ➜ πŸ“„ Full scss file

Current theme ➜ Oruga Full

SASS VariableDefault
$timepicker-font-size$base-font-size
$timepicker-box-line-height$base-line-height
$timepicker-box-padding0.375rem 1rem
$timepicker-footer-padding0 0.5rem
$timepicker-footer-margin0.875rem 0 0 0
$timepicker-select-line-height$base-line-height
$timepicker-select-padding$control-padding-vertical $control-padding-horizontal
$timepicker-select-color#363636
$timepicker-select-font-weight600
$timepicker-select-placeholder-opacity$base-disabled-opacity
$timepicker-separator-font-weight600

See ➜ πŸ“„ Full scss file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

SASS VariableDefault

See ➜ πŸ“„ Full scss file

Released under the MIT License.