Official Partner of
Nuxt
๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ Hire us

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.

Also, look at Date Input

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
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
7
8
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
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
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
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
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
7
8
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
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
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
Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
allowedDays

Function

-

allowedMonths

Function

-

allowedYears

Function

-

ariaNextPeriodLabel

String

"$t:nextPeriod"

ariaPreviousPeriodLabel

String

"$t:previousPeriod"

ariaSwitchViewLabel

String

"$t:switchView"

color

String

-

disabled

Boolean

false

endYear

Number

2073

firstWeekday

String

"Sunday"

firstWeekday

Name of first weekday. Can be Monday or Sunday

'Monday' | 'Sunday'

hideWeekDays

Boolean

false

highlightToday

Boolean

true

highlightWeekend

Boolean

false

mode

String

"auto"

mode

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

'single' | 'multiple' | 'range'

modelValue

Date | Array | Object

-

modelValue

Date, date array or date period

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

monthNames

Array

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

String

-

readonly

Boolean

false

showOtherMonths

Boolean

false

startYear

Number

1970

stateful

Boolean

false

textColor

String

-

type

String

"day"

view

Object

-

weekdayNames

Array

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

Function

-

weekendsColor

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

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