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

"$t:nextPeriod"

The aria-label of the "previous period" button

String

"$t:previousPeriod"

The aria-label of the "switch view" button

String

"$t:switchView"

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

String

-

Applies disabled style and removes all user interaction effects.

Boolean

false

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

Number

2073

Name of first weekday. Can be Monday or Sunday

String

"Sunday"

Name of first weekday. Can be Monday or Sunday

'Monday' | 'Sunday'

Hide weekday names on top of day picker

Boolean

false

If true today date will be colored

Boolean

true

If true weekend will be colored

Boolean

false

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

'single' | 'multiple' | 'range'

"auto"

Date, date array or date period

Date | Array | Object

-

Date, date array or date period

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

Array of 12 month names

Array

[
  "Jan",
  "Feb",
  "Mar",
  "Apr",
  "May",
  "Jun",
  "Jul",
  "Aug",
  "Sep",
  "Oct",
  "Nov",
  "Dec"
]

Named preset combination of component props.

String

-

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

Boolean

false

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

Boolean

false

First year that user can choose. By default is 1970

Number

1970

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

Boolean

false

Text color (theme string or HEX string).

String

-

This prop will specify which value user should choose

String

"day"

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

[
  "SU",
  "MO",
  "TU",
  "WE",
  "TH",
  "FR",
  "SA"
]

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-model-value

The event is triggered when the component needs to change the model. Is also used by 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.