OrugaTimepicker
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.