Pickers
The v-date-picker and v-time-picker are stand-alone components that can be utilized in many existing Vuetify components. They offer the user a visual reprensetation for selecting date and time.

Examples

#1 Date pickers - Light
edit
Date pickers come in two orientation variations, portrait (default) and landscape.

#2 Date pickers - Dark
edit
Date pickers come in a dark variant which utilizes the applications primary accent color.

#3 Date pickers - In dialog and menu
edit

When integrating a picker into a v-text-field, it is recommended to use the readonly prop. This will prevent mobile keyboards from triggering. To save vertical space, you can also hide the picker title.

Pickers expose a scoped slot that allow you to hook into save and cancel functionality. This will maintain an old value which can be replaced if the user cancels.


#4 Date pickers - Allowed dates
edit
You can specify allowed dates using arrays, objects, and functions.

#5 Custom format
edit
You can specify a custom date format. This will be returned through the formatted-value prop. Using the sync property (new in Vue 2.3), you can link up a formatted version of the date.

#6 Time pickers - Light
edit
Time pickers have the light theme enabled by default.

#7 Time pickers - Dark
edit
An alternate dark theme can be used for dark theme applications.

#8 Time pickers - In dialog and menu
edit
Due to the flexibility of pickers, you can really dial in the experience exactly how you want it.

#9 Time pickers - 24h format
edit
A time picker can be switched to 24hr format.

API

chevron_leftchevron_right