# Date pickers

# Allowed dates

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

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

# Elevation

The v-date-picker component supports elevation up to a maximum value of 24. For more information on elevations, visit the official Material Design elevations page.

# Icons

You can override the default icons used in the picker.

# Multiple

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

# Picker date

You can watch the picker-date which is the displayed month/year (depending on the picker type and active view) to perform some action when it changes. This uses the .sync modifier.

# Range

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.

# Readonly

Selecting new date could be disabled by adding readonly prop.

# Show current

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.

# Show sibling months

By default days from previous and next months are not visible. They can be displayed using the show-adjacent-months prop.

# Width

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

# Date buttons

Handle events such as @click, @dblclick, @mouseenter, and more when interacting with date, month, and year buttons.

# Date events

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.

# Active picker

You can create a birthday picker - starting with year picker by default, restricting dates range and closing the picker menu after selecting the day make the perfect birthday picker.

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

# Formatting

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

# Formatting with external libraries

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

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

# Orientation

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