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.

edit
Go to api
info
Date/Time pickers store internally the current value of your model and only change once saved. This can be accomplished by using the actions prop in conjunction with a scopedSlot to define your buttons, or by using the autosave prop.

Examples

Date pickers come in two orientation variations, portrait (default) and landscape.

Date pickers come in a dark variant which utilizes the applications primary accent color.

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.


You can specify allowed dates using arrays, objects, and functions.

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.

The date picker supports internationalization through the JavaScript Date object. Specify a BCP 47 language tag using the locale prop, and then set the first day of the week with the first-day-of-week prop.

Month pickers come in two orientation variations, portrait (default) and landscape.

Month pickers come in a dark variant which utilizes the applications primary accent color.

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.


You can specify allowed months using arrays, objects, and functions.

You can specify a custom month 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 month.

The month picker supports internationalization through the JavaScript Date object. Specify a BCP 47 language tag using the locale prop, and then set the first day of the week with the first-day-of-week prop.

Time pickers have the light theme enabled by default.

An alternate dark theme can be used for dark theme applications.

Due to the flexibility of pickers, you can really dial in the experience exactly how you want it.

A time picker can be switched to 24hr format.

You can specify allowed times using arrays, objects, and functions.

API