BlogPlaygroundOne

VDatePickerControls API

ads via vuetify

Props
name
type
default
active
string | string[]

undefined

Controls the active state of the item. This is typically used to highlight the component.

control-height
string | number

undefined

Sets the height of the controls.

control-variant
'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
string | boolean | string[]

null

Removes the ability to click or target the component.

mode-icon
  | string
  | (string | [string, number])[]
  | (new () => any)
  | FunctionalComponent

'$subgroup'

Icon used for the mode button.

month-text
string

undefined

Text displayed for the current month.

next-icon
  | string
  | (string | [string, number])[]
  | (new () => any)
  | FunctionalComponent

'$next'

Icon used for the next button.

no-month-picker
boolean

false

Only applies to controlVariant="modal", the month and year picker buttons are combined into one that only opens the year picker.

prev-icon
  | string
  | (string | [string, number])[]
  | (new () => any)
  | FunctionalComponent

'$prev'

Icon used for the previous button.

text
string

undefined

Specify content text for the component.

view-mode
'month' | 'year' | 'months'

'month'

Sets the view mode of the date picker.

year-text
string

undefined

Text displayed for the current year.

Events
name
type
click:month
[]

Event fired when clicking on the month.

click:next
[]

Event fired when clicking the next button.

click:next-year
[]

Event fired when clicking the next year button.

click:prev
[]

Event fired when clicking the previous button.

click:prev-year
[]

Event fired when clicking the previous year button.

click:year
[]

Event fired when clicking the date text.

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

The default Vue slot.