# 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.
footerClass Class of the Timepicker footer.
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

# Props

Prop name Description Type Values Default
appendToBody boolean -
autocomplete Native options to use in HTML5 validation string -
defaultMinutes number -
defaultSeconds number -
disabled boolean -
dropdownClasses Classes to apply on internal dropdown (@see o-dropdown style docs) object -
editable boolean -
enableSeconds boolean -
expanded Makes input full width when inside a grouped or addon field boolean -
focusable boolean - true
hourFormat string -
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 -
inputClasses Classes to apply on internal input (@see o-input style docs) object -
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 string -
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

# Slots

Name Description Bindings

# 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