# Date pickers
v-date-picker is a fully featured date selection component that lets users select a date, or range of dates.
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.
v-date-picker accepts ISO 8601 date strings (YYYY-MM-DD). For more information regarding ISO 8601 and other standards, visit the official ISO (International Organization for Standardization) International Standards page.
# Allowed dates
You can specify allowed dates using arrays, objects, and functions.
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.
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.
You can override the default icons used in the picker.
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
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.
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.
You can specify the picker’s width or make it full width.
# 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.
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
Date pickers come in two orientation variations, portrait (default) and landscape.