Date Picker
#

Date picker component allows user to select single, multiple or range of dates, months and years. You can customize it the way you want. There is a option to change all string and formats.

It based on native js dates so you can use this Date Picker with any date library you want.

Examples
#

Basic usage
#

By default, use this component with v-model.

SU
MO
TU
WE
TH
FR
SA
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Open in GitHub

Mode
#

You can use date picker in three different ways. By default date picker uses auto mode. This means that mode will be chosen based on modelValue. There is three modes: single, multiple and range. Different modes require different model values.

Single mode
SU
MO
TU
WE
TH
FR
SA
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Multiple mode
SU
MO
TU
WE
TH
FR
SA
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Range mode
SU
MO
TU
WE
TH
FR
SA
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Open in GitHub

Stateful
#

Date picker can be stateful. Initial value will be undefined, but user can change it.

Single mode
SU
MO
TU
WE
TH
FR
SA
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Multiple mode
SU
MO
TU
WE
TH
FR
SA
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Range mode
SU
MO
TU
WE
TH
FR
SA
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Open in GitHub

First day of the week
#

If you want to always use Monday as the first day of the week, you can set this prop in GlobalConfig.

Sun (default)
SU
MO
TU
WE
TH
FR
SA
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Monday
MO
TU
WE
TH
FR
SA
SU
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Open in GitHub

Weekends
#

You can highlight weekends using highlight-weekends prop. Also, you can set your own weekends using weekends function.

SU
MO
TU
WE
TH
FR
SA
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
SU
MO
TU
WE
TH
FR
SA
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Open in GitHub

Other month days
#

You can show days of other months using show-other-months prop instead of blank cells in calendar.

SU
MO
TU
WE
TH
FR
SA
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
Open in GitHub

Slots
#

For now, we don't support localization using one prop. But you have opportunity to localize it by yourself using slots.

ๆ—ฅ
ไธ€
ไบŒ
ไธ‰
ๅ››
ไบ”
ๅ…ญ
1ๆ—ฅ
2ๆ—ฅ
3ๆ—ฅ
4ๆ—ฅ
5ๆ—ฅ
6ๆ—ฅ
7ๆ—ฅ
8ๆ—ฅ
9ๆ—ฅ
10ๆ—ฅ
11ๆ—ฅ
12ๆ—ฅ
13ๆ—ฅ
14ๆ—ฅ
15ๆ—ฅ
16ๆ—ฅ
17ๆ—ฅ
18ๆ—ฅ
19ๆ—ฅ
20ๆ—ฅ
21ๆ—ฅ
22ๆ—ฅ
23ๆ—ฅ
24ๆ—ฅ
25ๆ—ฅ
26ๆ—ฅ
27ๆ—ฅ
28ๆ—ฅ
29ๆ—ฅ
30ๆ—ฅ
Open in GitHub

View
#

You can set specific view for date picker. With view prop you can define how date picker will displayed, year and month that will be shown.

Day, 1st month, 2000 year
SU
MO
TU
WE
TH
FR
SA
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Month, 2000 year
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
Year, 2000 year
1970
1971
1972
1973
1974
1975
1976
1977
1978
1979
1980
1981
1982
1983
1984
1985
1986
1987
1988
1989
1990
1991
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
2037
2038
2039
2040
2041
2042
2043
2044
2045
2046
2047
2048
2049
2050
2051
2052
2053
2054
2055
2056
2057
2058
2059
2060
2061
2062
2063
2064
2065
2066
2067
2068
2069
2070
2071
2072
2073
2074
Open in GitHub

Type
#

If you want allow user to pick only month or year, you can make it using type prop.

SU
MO
TU
WE
TH
FR
SA
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
1970
1971
1972
1973
1974
1975
1976
1977
1978
1979
1980
1981
1982
1983
1984
1985
1986
1987
1988
1989
1990
1991
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
2037
2038
2039
2040
2041
2042
2043
2044
2045
2046
2047
2048
2049
2050
2051
2052
2053
2054
2055
2056
2057
2058
2059
2060
2061
2062
2063
2064
2065
2066
2067
2068
2069
2070
2071
2072
2073
2074
Open in GitHub

Disable dates
#

You can disable some specific days, month or year using allowedDays, allowedMonth or allowedYear props.

SU
MO
TU
WE
TH
FR
SA
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
1970
1971
1972
1973
1974
1975
1976
1977
1978
1979
1980
1981
1982
1983
1984
1985
1986
1987
1988
1989
1990
1991
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
2037
2038
2039
2040
2041
2042
2043
2044
2045
2046
2047
2048
2049
2050
2051
2052
2053
2054
2055
2056
2057
2058
2059
2060
2061
2062
2063
2064
2065
2066
2067
2068
2069
2070
2071
2072
2073
2074
Open in GitHub

Colors
#

You can change colors using CSS variables for deeper customization, but also you can simple change colors using props.

SU
MO
TU
WE
TH
FR
SA
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
1970
1971
1972
1973
1974
1975
1976
1977
1978
1979
1980
1981
1982
1983
1984
1985
1986
1987
1988
1989
1990
1991
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
2037
2038
2039
2040
2041
2042
2043
2044
2045
2046
2047
2048
2049
2050
2051
2052
2053
2054
2055
2056
2057
2058
2059
2060
2061
2062
2063
2064
2065
2066
2067
2068
2069
2070
2071
2072
2073
2074
Open in GitHub

Readonly
#

Readonly picker for readonly forms.

SU
MO
TU
WE
TH
FR
SA
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
1970
1971
1972
1973
1974
1975
1976
1977
1978
1979
1980
1981
1982
1983
1984
1985
1986
1987
1988
1989
1990
1991
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
2037
2038
2039
2040
2041
2042
2043
2044
2045
2046
2047
2048
2049
2050
2051
2052
2053
2054
2055
2056
2057
2058
2059
2060
2061
2062
2063
2064
2065
2066
2067
2068
2069
2070
2071
2072
2073
2074
Open in GitHub

Disabled
#

Disabled picker that can be used in forms.

SU
MO
TU
WE
TH
FR
SA
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
1970
1971
1972
1973
1974
1975
1976
1977
1978
1979
1980
1981
1982
1983
1984
1985
1986
1987
1988
1989
1990
1991
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
2037
2038
2039
2040
2041
2042
2043
2044
2045
2046
2047
2048
2049
2050
2051
2052
2053
2054
2055
2056
2057
2058
2059
2060
2061
2062
2063
2064
2065
2066
2067
2068
2069
2070
2071
2072
2073
2074
Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
allowedDays

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

Function

-

allowedMonths

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

Function

-

allowedYears

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

Function

-

ariaNextPeriodLabel

The aria-label of the "next period" button

String

"$t:nextPeriod"

ariaPreviousPeriodLabel

The aria-label of the "previous period" button

String

"$t:previousPeriod"

ariaSwitchViewLabel

The aria-label of the "switch view" button

String

"$t:switchView"

child:middleButton

Object

-

child:nextButton

Object

-

child:prevButton

Object

-

color

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

String

-

disabled

Applies disabled style and removes all user interaction effects.

Boolean

false

endYear

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

Number | String

2074

firstWeekday

Name of first weekday. Can be Monday or Sunday

'Monday' | 'Sunday'

"Sunday"

hideWeekDays

Hide weekday names on top of day picker

Boolean

false

highlightToday

If true today date will be colored

Boolean

true

highlightWeekend

If true weekend will be colored

Boolean

false

mode

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

'single' | 'multiple' | 'range'

"auto"

modelValue

Date, date array or date period

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

-

monthNames

Array of 12 month names

Array

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

Named preset combination of component props.

String

-

readonly

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

Boolean

false

showOtherMonths

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

Boolean

false

startYear

First year that user can choose. By default is 1970

Number | String

1970

stateful

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

Boolean

false

type

This prop will specify which value user should choose

String

"day"

view

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

-

weekdayNames

Array of 7 weekday names

Array

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

Function that accepts date and return true if date is weekend

Function

-

weekendsColor

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

String

-

Events #

NameDescription

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

The event is triggered when clicked the day cell.. The event argument is:

`() => Date`

clickMonth

The event is triggered when clicked the month cell.. The event argument is:

`() => Date`

clickYear

The event is triggered when clicked the year cell.. The event argument is:

`() => Date`

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

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

`() => Date | undefined`

hoverMonth

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

`() => Date | undefined`

hoverYear

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

`() => Date | undefined`

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

Emit when DatePicker "view type" is changed. DatePicker view types are "day", "month", "year".. The event argument is:

`() => Object`

Slots #

NameDescription

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.

Css Variables #

NameDefault Value
--va-date-picker-font-style normal
--va-date-picker-font-weight 600
--va-date-picker-font-size 12px
--va-date-picker-line-height 1.25
--va-date-picker-weekday-font-size 9px
--va-date-picker-color var(--va-primary)
--va-date-picker-text-color inherit
--va-date-picker-cell-size 32px
--va-date-picker-cell-gap 2px
--va-date-picker-cell-radius 4px
--va-date-picker-selected-text var(--va-text-inverted)
--va-date-picker-selected-background var(--va-date-picker-color)
--va-date-picker-today-background var(--va-date-picker-color)
--va-date-picker-today-background-opacity 0.8
--va-date-picker-weekends-color var(--va-danger)
--va-date-picker-focused-border-color var(--va-date-picker-color)
--va-date-picker-cell-opacity 0.5
--va-date-picker-cell-background-opacity-hover 0.1
--va-date-picker-cell-background-opacity-in-range 0.2
--va-date-picker-cell-selected-background-opacity-hover 0.8

Change log #