Date Picker

#

Function that accepts date and return false if day is not allowed

Function

Function that accepts date and return false if month is not allowed

Function

Function that accepts date and return false if year is not allowed

Function

The aria-label of the "next period" button

String

The aria-label of the "previous period" button

String

The aria-label of the "switch view" button

String

Object

Object

Object

Color of the component (theme string or HEX string).

String

Applies disabled style and removes all user interaction effects.

Boolean

Last year that user can choose. By default is current year plus 50 years

Number

Name of first weekday. Can be Monday or Sunday

'Monday' | 'Sunday'

Hide weekday names on top of day picker

Boolean

If true today date will be colored

Boolean

If true weekend will be colored

Boolean

Specify if picker value is single date, multiple dates or date range.

'single' | 'multiple' | 'range'

Date, date array or date period

Date | Date[] | { start: Date | null, end: Date | null }

Array of 12 month names

Array

Named preset combination of component props.

String

Doesn't look disabled, but acts like one. Mostly useful for wrapper components.

Boolean

If true, other month days will be shown in day picker

Boolean

First year that user can choose. By default is 1970

Number

Add possibility to work with component without setting v-model.

Boolean

This prop will specify which value user should choose

String

This prop specify which year and month will be shown to user. Also, you can specify type and show year, month or day picker

Object

Array of 7 weekday names

Array

Function that accepts date and return true if date is weekend

Function

Color of the weekend cells (theme string or HEX string).

String

click:day

The event is triggered when clicked the day cell.

click:month

The event is triggered when clicked the month cell.

click:year

The event is triggered when clicked the year cell.

clickDay

clickMonth

clickYear

hover:day

The event is triggered when the mouse hover the day cell.

hover:month

The event is triggered when the mouse hover the month cell.

hover:year

The event is triggered when the mouse hover the year cell.

hoverDay

hoverMonth

hoverYear

update:modelValue

The event is triggered when the component needs to change the model. Is also used by v-model and must be listed after the v-model

update:view

Emit when DatePicker "view type" is changed. DatePicker view types are "day", "month", "year".

updateView

buttonNext

Button show next month or year.

buttonPrev

Button show previous month or year.

day

Used to change how day will be displayed in picker cell.

header

This slot is showing year and month between header buttons.

month

Used to change how month will be displayed in header and picker cell.

weekday

Used to change how weekday will be displayed in picker cell.

year

Used to change how year will be displayed in header and picker cell.