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.


Labs components require a manual import and installation of the component.

import { VDatePicker } from 'vuetify/labs/VDatePicker'

export default createVuetify({
  components: {


v-date-pickerPrimary Component


The v-date-picker component is a stand-alone interface that allows the selection of a date, month and year. This component is built using the Date composable.

All date components support the date-ioabstraction layer for date management. By default they will use a built-in adapter that uses the native Date object, but it is possible to use any of the date-io adapters. See the datespage for more information.

import DayJsAdapter from '@date-io/dayjs'

  date: {
    adapter: DayJsAdapter,

The components also use the i18nfeature to know which locale should be used for dates. If you are using the built-in date adapter, then everything should work automatically.

However if you are not using the build in date adapter, like date-fns, then you will need to set up a mapping from the i18nlocale string to the date library locale in the vuetify options.

import DateFnsAdapter from '@date-io/date-fns'
import enUS from 'date-fns/locale/en-US'
import svSE from 'date-fns/locale/sv'

  date: {
    adapter: DateFnsAdapter,
    locale: {
      en: enUS,
      sv: svSE,

Here is an example of switching the locale of the v-date-picker component.



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


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

Show sibling months

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


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.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page onGitHub