Store

For Enterprise

The v-date-picker is stand-alone component that can be utilized in many existing Vuetify components. It offers the user a visual representation for selecting date/month.

Date pickers come in two orientation variations, portrait (default) and landscape. By default they are emitting input event when the day (for date picker) or month (for month picker), but with reactive prop they can update the model even after clicking year/month.

Select your desired component from below and see the available props, slots, events and functions.

Below is a collection of simple to complex examples.

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.

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

You can specify allowed the picker's width or make it full width.

You can watch the pickerDate which is the displayed month/year (depending on the picker type and active view) to perform some action when it changes.

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.

You can override the default icons used in the picker.

Selecting new date could be disabled by adding readonly prop.

By default the current date is displayed using outlined button - show-current prop allows you to remove the border or select different date to be displayed as the current one.

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

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.

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

Month pickers can now select multiple months with the multiple prop. If using multiple then the month picker expects its model to be an array.

You can specify allowed the picker's width or make it full width.

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.

You can override the default icons used in the picker.

Selecting new date could be disabled by adding readonly prop.

By default the current month is displayed using outlined button - show-current prop allows you to remove the border or select different month to be displayed as the current one.

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 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.

If you need to display date in the custom format (different than YYYY-MM-DD) you need to use the formatting function.

Formatting dates is possible also with external libs such as Moment.js or date-fns

Date picker can now select multiple dates with the multiple prop. If using multiple then date picker expects its model to be an array.

Date picker can select date range with the range prop. When using range prop date picker expects its model to be an array of length 2 or empty.

Starting with year picker by default, resticting dates range and closing the picker menu after selecting the day make the perfect birthday picker.

You can specify events using arrays, objects or functions. To change the default color of the event use event-color prop. Your events function or object can return an array of colors (material or css) in case you want to display multiple event indicators.

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 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.

Ready for more? Continue reading with:

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!