Date pickers

v-date-picker is a fully featured date selection component that lets users select a date.

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

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-io abstraction 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 dates page for more information.

import DayJsAdapter from '@date-io/dayjs'

createVuetify({
  date: {
    adapter: DayJsAdapter,
  },
})

Props

The v-date-picker component supports multiple props for configuring dates that can be selected, date formats, translations and more.

Elevation

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

Width

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.

Colors

Date picker colors can be set using the color props.

Allowed dates

Specify allowed dates using objects or functions. When using objects, accepts a date string in the format of YYYY-MM-DD. When using functions, accepts a date object as a parameter and should return a boolean.

Landscape

Using landscape moves header to the side. You can customize it further using custom width and date format.

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.

Slots

Controls

Replace main controls to adapt behavior and/or visual appearance beyond CSS styling.

Internationalization

Vuetify components can localize date formats by utilizing the i18n feature. This determines the appropriate locale for date display. When the default date adapter is in use, localization is managed automatically.

For those not using the default date adapter, you need to create a mapping between the i18n locale string and your chosen date library's locale. This can be done in the Vuetify options as shown below:

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,
    },
  },
})

Parsing dates

It's recommended that you use the Date composable for parsing and formatting when working with string dates. The following example uses the parseISO function to convert a string date to a Date object.

import { useDate } from 'vuetify'

const adapter = useDate()
const date = '2023-11-30'

console.log(new Date(date)) // Wed Nov 29 2023 18:00:00 GMT-0600
console.log(adapter.parseISO(date)) // Thu Nov 30 2023 00:00:00 GMT-0600

Using this function ensures that the date is parsed correctly regardless of the user's timezone.