# 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.
selectClasses Classes to apply on select. More detail here
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 -
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

# 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