Skip to content

Timepicker

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

Examples

Base

Show code

Inline

Show code

Min/Max date

Show code

Slot

Show code

Granularity

Show code

Class props

'Classes applied to the element'

Timepicker component

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

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

Props

Prop nameDescriptionTypeValuesDefault
activeThe active state of the dropdownboolean-false
closeOnClickClose dropdown on clickboolean-
From config:
timepicker: {
  closeOnClick: true
}
defaultMinutesnumber-
defaultSecondsnumber-
disabledSame as native disabledboolean-false
enableSecondsboolean-false
expandedMakes input full width when inside a grouped or addon fieldboolean-false
hourFormatstring12, 24, 12, 24
iconIcon to be shownstring-
From config:
timepicker: {
  icon: undefined
}
iconPackIcon pack to usestringmdi, fa, fas and any other custom icon pack
From config:
timepicker: {
  iconPack: undefined
}
iconRightIcon to be added on the right sidestring-
From config:
timepicker: {
  iconRight: undefined
}
iconRightClickableMake the icon right clickableboolean-false
incrementHoursnumber-1
incrementMinutesnumber-1
incrementSecondsnumber-1
inlineDisplay datepicker inlineboolean-false
localeDate format localestring-
From config:
{
  locale: undefined
}
maxTimeMax time to selectDate-
minTimeMin time to selectDate-
mobileBreakpointMobile breakpoint as max-width valuestring-
From config:
timepicker: {
  mobileBreakpoint: undefined
}
mobileModalEnable dropdown mobile modalboolean-
From config:
timepicker: {
  mobileModal: true
}
mobileNativeEnable mobile native input if mobile agentboolean-
From config:
timepicker: {
  mobileNative: true
}
openOnFocusOpen dropdown on focusboolean-
From config:
timepicker: {
  openOnFocus: true
}
overrideOverride existing theme classes completelyboolean-
placeholderInput placeholderstring-
positionDropdown positionstring-
readonlySame as native input readonlyboolean-false
resetOnMeridianChangeReset the time inputs when meridian changesboolean-false
roundedMakes the input roundedboolean-false
sizeSize of the buttonstringsmall, medium, large
From config:
timepicker: {
  size: undefined
}
teleportAppend the component to another part of the DOM.
Set true to append the component to the body.
In addition, any CSS selector string or an actual DOM node can be used.
boolean|string|object-
From config:
timepicker: {
  teleport: false
}
timeCreatortime creator function, default is new Date()() => Date-
From config:
timepicker: {
  timeCreator: () => new Date()
}
timeFormatterCustom function to format a date into a string(date: Date) => string-
From config:
timepicker: {
  timeFormatter: defaultFunction
}
timeParserCustom function to parse a string into a date(date: string) => Date-
From config:
timepicker: {
  timeParser: defaultFunction
}
trapFocusDropdown trapFocusboolean-
From config:
timepicker: {
  trapFocus: true
}
unselectableTimesDefine a list of times which can not be selectedDate[] | ((date: Date) => boolean)-Default function (see source code)
useHtml5ValidationEnable html 5 native validationboolean-
From config:
{
  useHtml5Validation: true
}
v-modelDate-
validationMessageThe message which is shown when a validation error occursstring-

Events

Event namePropertiesDescription
focusevent Event - native eventon input focus event
blurevent Event - native eventon input blur event
invalidevent Event - native eventon input invalid event
icon-clickevent Event - native eventon icon click event
icon-right-clickevent Event - native eventon icon right click event
update:modelValuevalue Date - updated modelValue propmodelValue prop two-way binding
update:activevalue boolean - updated active propactive prop two-way binding

Slots

NameDescriptionBindings
triggerOverride the trigger
defaultDefine an additional content on footer

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.