Time Picker
The TimePicker is stand-alone component that can be utilized in many existing Vuetify components. It offers the user a visual representation for selecting the time.
info
For more details about Vuetify’s usage of TimePicker component, click TimePicker page.
For more prop explanations, click Vuetify TimePicker API page.
Props
| Attribute | Description | Type | Default |
|---|---|---|---|
| dark | Applies the dark theme variant to the component. You can find more information on the Material Design documentation for dark themes. | boolean | False |
| disabled | Disables picker. | boolean | false |
| format | Defines the format of a time displayed in picker. Available options are ampm and 24hr. | string | 'ampm' |
| max | Maximum allowed time. | string | undefined |
| min | Minimum allowed time. | string | undefined |
| noTitle | Hide the picker title. | boolean | false |
| value | Time picker model (ISO 8601 format, 24hr hh:mm). | any | undefined |
| visible | Visibility of TimePicker component. | boolean | true |
Events
| Attribute | Description |
|---|---|
| change | Emitted when the time selection is done (when user changes the minute for HH:MM picker and the second for HH:MM:SS picker |
| click:hour | Emitted when user selects the hour |
| click:minute | Emitted when user selects the minute |
Slots
| Attribute | Description |
|---|---|
| default | Displayed below the clock, can be used for example for adding action button (OK and Cancel) |
Component Samples
Format
A time picker can be switched to 24hr format. Note that the format prop defines only the way the picker is displayed, picker’s value is always in 24hr format.
Range
This is an example of joining pickers together using min and max prop.
Dark Mode
No title
You can remove picker’s title.
