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 β
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 |
Timepicker component β
html
<o-timepicker></o-timepicker>
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 | 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 | - | ||
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: { | |
openOnFocus | boolean | - | ||
override | boolean | - | ||
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: { |
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: { |
v-model | date | - | ||
validationMessage | The message which is shown when a validation error occurs | string | - |
Events β
Event name | Properties | Description |
---|---|---|
blur | ||
focus | ||
invalid | ||
update:modelValue |
Slots β
Name | Description | Bindings |
---|---|---|
trigger | ||
default |
Sass variables β
Current theme β Oruga Base
SASS Variable | Default |
---|---|
$timepicker-font-size | $base-font-size |
$timepicker-box-line-height | $base-line-height |
$timepicker-box-padding | 0.375rem 1rem |
$timepicker-footer-padding | 0 0.5rem |
$timepicker-footer-margin | 0.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-weight | 600 |
$timepicker-select-placeholder-opacity | $base-disabled-opacity |
$timepicker-separator-font-weight | 600 |
See β π Full scss file
Current theme β Oruga Full
SASS Variable | Default |
---|---|
$timepicker-font-size | $base-font-size |
$timepicker-box-line-height | $base-line-height |
$timepicker-box-padding | 0.375rem 1rem |
$timepicker-footer-padding | 0 0.5rem |
$timepicker-footer-margin | 0.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-weight | 600 |
$timepicker-select-placeholder-opacity | $base-disabled-opacity |
$timepicker-separator-font-weight | 600 |
See β π Full scss file
Current theme β Bulma
The theme does not have any custom variables for this component.