Date/month picker

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.

Usage

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.


API

Examples

Date pickers - Colors

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.


Date pickers - In dialog and menu

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.


Date pickers - Allowed dates

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


Date pickers - Setting picker width

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


Date pickers - birthday picker

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


PATREON
Support Vuetify

Date pickers - react to disaplyed month/year change

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.


Date pickers - Events

You can specify events using arrays, objects, and functions. To change the default color of the event use event-color prop.


Date pickers - Internationalization

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.


Date pickers - icons

You can override the default icons used in the picker.


Date pickers - read only

Selecting new date could be disabled by adding readonly prop.


Date pickers - current date indicator

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


Month pickers

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


Month pickers - Colors

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.


Month pickers - In dialog and menu

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.


Month pickers - Allowed months

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


Month pickers - Setting picker width

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


Month pickers - Internationalization

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.


Month pickers - icons

You can override the default icons used in the picker.


Month pickers - read only

Selecting new date could be disabled by adding readonly prop.


Month pickers - current month indicator

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