# Timepicker

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


edit on github

# Examples

# Min/Max date

# Granularity

# Inline

# Class props

📄 Full scss file


How does Class props inspector work?
Class prop Description Props Suffixes
boxClass Class of the Timepicker component box where you choose the date.
dropdownClasses Classes to apply on dropdown. More detail here
footerClass Class of the Timepicker footer.
inputClasses Classes to apply on internal input. More detail here
mobileClass Class of the Table when on mobile.
👉 Switch to mobile view to see it in action!
rootClass Class of the root element.
selectClass Class of the Timepicker select.
selectPlaceholderClass Class of the Timepicker select placeholder.
separatorClass Class of the Timepicker separator.
sizeClass Class of the Timepicker component size. size small
medium
large


# Props

Prop name Description Type Values Default
appendToBody boolean -
autocomplete Native options to use in HTML5 validation string -
defaultMinutes number -
defaultSeconds number -
disabled boolean -
editable boolean -
enableSeconds boolean -
expanded Makes input full width when inside a grouped or addon field boolean -
hourFormat Hour format for input and display string 12, 24
icon Icon name to be added string -
iconPack Icon pack to use string mdi, fa, fas and any other custom icon pack
incrementHours number - 1
incrementMinutes number - 1
incrementSeconds number - 1
inline boolean -
maxTime date -
maxlength Same as native maxlength, plus character counter number|string -
minTime date -
mobileBreakpoint Mobile breakpoint as max-width value string -
mobileNative boolean -
From config

timepicker: {
  mobileNative: true
}
openOnFocus boolean -
override Override classes boolean - false
placeholder string -
position Optional, position of the datepicker relative to the input string top-right, top-left, bottom-left
resetOnMeridianChange boolean - false
rounded Makes the element rounded boolean -
size Size of button, optional string small, medium, large
statusIcon Show status icon using field and variant prop boolean -
From config

{
   "statusIcon": true
}
timeCreator func - Default function (see source code)
timeFormatter func - Default function (see source code)
timeParser func - Default function (see source code)
unselectableTimes array -
useHtml5Validation Enable html 5 native validation boolean -
From config

{
   "useHtml5Validation": true
}
validationMessage The message which is shown when a validation error occurs string -
value date -

# Events

Event name Properties Description
blur
focus
input

# Slots

Name Description Bindings
trigger
default

# Style

CSS Variable SASS Variable Default
--oruga-timepicker-font-size $timepicker-font-size $base-font-size
--oruga-timepicker-box-line-height $timepicker-box-line-height $base-line-height
--oruga-timepicker-box-padding $timepicker-box-padding .375rem 1rem
--oruga-timepicker-footer-padding $timepicker-footer-padding 0 .5rem
--oruga-timepicker-footer-margin $timepicker-footer-margin 0.875rem 0 0 0
--oruga-timepicker-select-line-height $timepicker-select-line-height $base-line-height
--oruga-timepicker-select-padding $timepicker-select-padding $control-padding-vertical $control-padding-horizontal
--oruga-timepicker-select-color $timepicker-select-color #363636
--oruga-timepicker-select-font-weight $timepicker-select-font-weight 600
--oruga-timepicker-select-placeholder-opacity $timepicker-select-placeholder-opacity $base-disabled-opacity
--oruga-timepicker-separator-font-weight $timepicker-separator-font-weight 600