packages/docs/src/pages/en/components/time-pickers.md
The v-time-picker is stand-alone component that can be utilized in many existing Vuetify components. It offers the user a visual representation for selecting the time.
Time pickers have the light theme enabled by default.
<ExamplesUsage name="v-time-picker" /> <PromotedEntry />| Component | Description |
|---|---|
| v-time-picker | Primary Component |
You can specify allowed times using arrays, objects, and functions. You can also specify time step/precision/interval - e.g. 10 minutes.
<ExamplesExample file="v-time-picker/prop-allowed-times" />Time picker colors can be set using the color prop.
You can't interact with disabled picker.
<ExamplesExample file="v-time-picker/prop-disabled" />Emphasize the v-time-picker component by providing an elevation from 0 to 5. Elevation modifies the box-shadow css property.
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 (model) is always in 24hr format.
You can remove picker's header.
<ExamplesExample file="v-time-picker/prop-hide-header" />This is an example of joining pickers together using min and max prop.
Read-only picker behaves same as disabled one, but looks like default one.
<ExamplesExample file="v-time-picker/prop-readonly" />You can edit time picker's value using mouse wheel.
<ExamplesExample file="v-time-picker/prop-scrollable" />Time picker can have seconds input.
<ExamplesExample file="v-time-picker/prop-use-seconds" />Due to the flexibility of pickers, you can really dial in the experience exactly how you want it.
<ExamplesExample file="v-time-picker/misc-dialog-and-menu" />