#Date pickers

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

#Installation

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

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

export default createVuetify({
  components: {
    VDatePicker,
  },
})

#API

#Guide

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'

createVuetify({
  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'

createVuetify({
  date: {
    adapter: DateFnsAdapter,
    locale: {
      en: enUS,
      sv: svSE,
    },
  },
})

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