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 representation for selecting date and time.

Go to api
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.

Date picker colors can be set using the color and header-color props. If header-color prop is not provided header will use the color prop value.

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 use your own formatting function if you want to display the date in the different format than ISO 8601


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

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.

Month picker colors can be set using the color and header-color props. If header-color prop is not provided header will use the color prop value.

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.

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.

Time picker colors can be set using the color and header-color props. If header-color prop is not provided header will use the color prop value.

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