VDatePicker API

Props

name	type	default
`allowed-dates`	unknown[] \| ((date: unknown) => boolean)	undefined
Restricts which dates can be selected.
`allowed-months`	number[] \| ((date: number) => boolean)	undefined
Restricts which months can be selected.
`allowed-years`	number[] \| ((date: number) => boolean)	undefined
Restricts which years can be selected.
`bg-color`	string	undefined
Applies specified color to the control’s background. Used on components that also support the color prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`border`	string \| number \| boolean	false
Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border="sm"`). Find a list of the built-in border classes on the borders page.
`color`	string	undefined
Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`control-height` New in v3.8.0	string \| number	undefined
Sets the height of the controls.
`control-variant` New in v3.11.0	'docked' \| 'modal'	'docked'
docked: Separate control groups for month and year. modal: Month and year are displayed together, clicking the text opens a month picker, clicking the dropdown arrow opens a year picker. There are also arrow buttons to scroll between months.
`disabled`	boolean	null
Removes the ability to click or target the component.
`divided`	boolean	false
Adds a divider between the header and controls.
`elevation`	string \| number	undefined
Designates an elevation applied to the component between 0 and 5. You can find more information on the elevation page.
`event-color` New in v3.11.0	\| string \| boolean \| string[] \| Record<string, string \| boolean \| string[]> \| ((date: string) => string \| boolean \| string[])	null
Sets the color for event dots. It can be string (all events will have the same color) or `object` where attribute is the event date and value is boolean/color/array of colors for specified date or `function` taking date as a parameter and returning boolean/color/array of colors for that date.
`events` New in v3.11.0	\| string[] \| ((date: string) => string \| boolean \| string[]) \| Record<string, string \| boolean \| string[]>	null
Array of dates or object defining events or colors or function returning boolean/color/array of colors.
`first-day-of-week`	string \| number	undefined
Sets the first day of the week, starting with 0 for Sunday. (Note: not guaranteed to work when using custom date adapters.)
`first-day-of-year` New in v3.10.0	string \| number	undefined
Sets the day that determines the first week of the year, starting with 0 for Sunday. For ISO 8601 this should be 4. (Note: not guaranteed to work when using custom date adapters.)
`header`	string	'$vuetify.datePicker.header'
Text shown when no display-date is set.
`header-color` New in v3.8.0	string	undefined
Allows you to set a different color for the header when used in conjunction with the `color` prop.
`header-date-format` New in v3.11.0	string	'normalDateWithWeekday'
Allows you to customize the format of the date selection text that appears in the header of the calendar.
`height`	string \| number	undefined
Sets the height for the component.
`hide-header`	boolean	false
Hides the header.
`hide-title` New in v3.10.0	boolean	false
Hide the picker title.
`hide-weekdays`	boolean	false
Hides the weekdays.
`landscape` New in v3.11.0	boolean	false
Changes the picker to landscape mode.
`landscape-header-width` New in v3.11.0	string \| number	undefined
Sets header width when in landscape mode.
`location`	Anchor	undefined
Specifies the component’s location. Can combine by using a space separated string.
`max`	unknown	undefined
Maximum allowed date/month (ISO 8601 format).
`max-height`	string \| number	undefined
Sets the maximum height for the component.
`max-width`	string \| number	undefined
Sets the maximum width for the component.
`min`	unknown	undefined
Minimum allowed date/month (ISO 8601 format).
`min-height`	string \| number	undefined
Sets the minimum height for the component.
`min-width`	string \| number	undefined
Sets the minimum width for the component.
`mode-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$subgroup'
Icon displayed next to the current month and year, toggles year selection when clicked.
`model-value`	unknown	undefined
The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
`month`	string \| number	undefined
Sets the month.
`multiple`	number \| boolean \| (string & {}) \| 'range'	false
Allow the selection of multiple dates. The range value selects all dates between two selections.
`next-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$next'
Sets the icon for next month/year button.
`no-month-picker` New in v3.11.0	boolean	false
Only applies to `controlVariant="modal"`, the month and year picker buttons are combined into one that only opens the year picker.
`position`	'fixed' \| 'static' \| 'relative' \| 'absolute' \| 'sticky'	undefined
Sets the position for the component.
`prev-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$prev'
Sets the icon for previous month/year button.
`readonly`	boolean	false
Makes the picker readonly (doesn’t allow to select new date).
`reverse-transition`	string	'picker-reverse-transition'
The transition used when changing months into the past
`rounded`	string \| number \| boolean	undefined
Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page.
`show-adjacent-months`	boolean	false
Toggles visibility of days from previous and next months.
`show-week`	boolean	false
Toggles visibility of the week numbers in the body of the calendar.
`tag`	string \| (new () => any) \| FunctionalComponent	'div'
Specify a custom tag used on the root element.
`text`	string	undefined
Specify content text for the component.
`theme`	string	undefined
Specify a theme for this component and all of its children.
`tile`	boolean	false
Removes any applied border-radius from the component.
`title`	string	'$vuetify.datePicker.title'
Specify a title text for the component.
`transition`	string	'picker-transition'
The transition used when changing months into the future
`view-mode`	'month' \| 'year' \| 'months'	'month'
Determines which picker in the date or month picker is being displayed. Allowed values: `'month'`, `'months'`, `'year'`.
`weekday-format`	'long' \| 'short' \| 'narrow'	undefined
Allows you to customize the format of the weekday string that appears in the body of the calendar. Uses `'narrow'` by default. (Note: not guaranteed to work when using custom date adapters.)
`weekdays`	(0 \| 1 \| 2 \| 4 \| 5 \| 6 \| 3)[]	[0, 1, 2, 3, 4, 5, 6]
An array of weekdays to display. Does not affect the order.
`weeks-in-month`	'static' \| 'dynamic'	'static'
A dynamic number of weeks in a month will grow and shrink depending on how many days are in the month. A static number always shows 7 weeks.
`width`	string \| number	undefined
Width of the picker.
`year`	number	undefined
Sets the year.

Events

name	type
`update:modelValue`	[unknown]
Event that is emitted when the component’s model changes.
`update:month`	[any]
Emitted when the month changes.
`update:viewMode`	[any]
Emitted when the view mode changes.
`update:year`	[any]
Emitted when the year changes.

Slots

never

never

{
  viewMode: 'month' | 'year' | 'months'
  monthYearText: string
  monthText: string
  yearText: string
  disabled: string[]
  openMonths: () => void
  openYears: () => void
  prevMonth: () => void
  nextMonth: () => void
  prevYear: () => void
  nextYear: () => void
}

{ props: { onClick: () => void }; item: any; i: number }

{ header: string; transition: string }

{
  month: { text: string; value: number }
  i: number
  props: { onClick: () => void }
}

never

never

{
  year: { text: string; value: number }
  i: number
  props: {
    active: boolean
    color: string
    rounded: boolean
    text: string
    variant: 'text' | 'flat'
    onClick: () => void
  }
}

`actions`
Slot for the actions.
`append`
Adds an item inside the input and after input content.
`controls` New in v3.11.0
Slot for the controls.
`day`
Slot for a day in the month.
`header`
Slot for the header.
`month`
Slot for the month.
`prepend`
Adds an item outside the input and before input content.
`title`
Slot for the component’s title content.
`year`
Slot for the year.

SASS Variables

name	default
`$date-picker-controls-docked-toggle-append-margin-inline`	4px -4px
`$date-picker-controls-docked-toggle-btn-padding`	12px 8px
`$date-picker-controls-height`	var(--v-date-picker-controls-height, 56px)
`$date-picker-controls-padding`	4px 12px
`$date-picker-event-border-radius`	4px
`$date-picker-event-date-bottom`	8px
`$date-picker-event-margin`	0 1px
`$date-picker-event-size`	8px
`$date-picker-header-height`	70px
`$date-picker-landscape-header-width`	170px
`$date-picker-month-btn-height`	24px
`$date-picker-month-btn-size`	0.875rem
`$date-picker-month-column-gap`	4px
`$date-picker-month-day-size`	40px
`$date-picker-month-font-size`	0.875rem
`$date-picker-month-padding`	0 12px 8px
`$date-picker-months-grid-gap`	0px 24px
`$date-picker-months-height`	288px
`$date-picker-show-week-width`	368px
`$date-picker-width`	328px
`$date-picker-years-height`	288px
`$date-picker-years-padding-inline`	32px

#VDatePicker API

VDatePicker API