Vue 3 Datepickers

Can you use them with a keyboard?

This page compares open-source Vue 3 datepickers from a keyboard-usability perspective.

Use your keyboard to navigate each datepicker and enter or clear a date with the tab, up, down, left, right, spacebar, enter, escape, delete and backspace keys.

N.B. Examples and package sizes (gzipped) are only shown here for datepickers that are NOT part of a UI framework. Also, weekends have been disabled (where possible) to show the behaviour of disabled dates.

Show as inline where possible?

Include datepickers with no keyboard support?

Include UI component frameworks?

Order by:

Showing 14 of 26 datepickers

@sum.cumo/vue-datepicker

 
npmjsGitHub
SunMonTueWedThuFriSat
Weekly downloads:
8,100
GitHub stars:
71
Watching:
14
Forks:
20
Issues:
9
Pull requests:
7
CSS (gzipped):
1.53 kB
JS (gzipped):
25.61 kB
Dependencies :
-
Total size (gzipped):
27.14 kB

Notes:

  • Excellent keyboard support.
  • A minification step reduces the total size by approx. 40% to 16.11 kB. A similar reduction can be expected for other datepickers too.

vue-tailwind-datepicker

 
npmjsGitHub
Weekly downloads:
2,814
GitHub stars:
120
Watching:
4
Forks:
17
Issues:
16
Pull requests:
0
CSS (gzipped):
-
JS (gzipped):
25.40 kB
Dependencies (dayjs):
28.80 kB
Total size (gzipped):
54.20 kB

Notes:

  • Elements are not focus-trapped; tabbing should not cycle through every focusable element.
  • Cannot arrow through the dates, months or years (you can only tab).
  • When you select a month or year, the focus is lost entirely.

v-calendar

 
npmjsGitHub
S
M
T
W
T
F
S
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
31
1
2
3
4
5
6
Weekly downloads:
202,130
GitHub stars:
3,848
Watching:
36
Forks:
778
Issues:
621
Pull requests:
51
CSS (gzipped):
5.53 kB
JS (gzipped):
56.70 kB
Dependencies (popperjs):
14.10 kB
Total size (gzipped):
76.33 kB

Notes:

  • Reasonably good keyboard support, but:
  • Selecting the focused prev/next buttons via `spacebar` or `enter` skips by two months, not one.
  • You cannot tab to the 'Month-Year' button.
  • When tabbing through the focus-trapped elements, you need to `tab` twice (probably related to above bug).
  • Cannot arrow through the months or years (you can only tab).
  • Disabled dates can be focused.
  • When you select a month, the focus is lost entirely.

@vuepic/vue-datepicker

 
npmjsGitHub
Weekly downloads:
106,759
GitHub stars:
822
Watching:
7
Forks:
81
Issues:
12
Pull requests:
0
CSS (gzipped):
3.60 kB
JS (gzipped):
37.41 kB
Dependencies (date-fns):
36.20 kB
Total size (gzipped):
77.21 kB

Notes:

  • No element is focused on tabbing into the datepicker (you need to `tab` twice).
  • Selecting the focused prev/next buttons via `spacebar` or `enter` skips by two months, not one.
  • Elements are not focus-trapped; tabbing should not cycle through every focusable element.
  • Cannot arrow through the dates, months or years (you can only tab).
  • Arrowing left/right always increments/decrements the month, regardless of which element is focused.
  • When you select a month or year, the focus is lost entirely.

Vuetensils

 

(UI Framework)

npmjsGitHub

Click the link above to see an example

Weekly downloads:
488
GitHub stars:
643
Watching:
9
Forks:
39
Issues:
10
Pull requests:
1

Notes:

  • Reasonably good keyboard support, however:
  • You cannot adjust by more than one year at a time.
  • Does not feature `disabled dates`.
  • Author says it is a work-in-progress and recommends using the browser's built in date picker(<input type="date">) because it's simpler, consistent across web sites, and is less code. However, it does not support custom styling.
  • You cannot delete or backspace to clear an inline datepicker, however you may add a clear button.

Ionic Vue

 

(UI Framework)

npmjsGitHub

Click the link above to see an example

Weekly downloads:
33,429
GitHub stars:
49,090
Watching:
1,629
Forks:
13,646
Issues:
466
Pull requests:
24

Notes:

  • Uses native web components; allows you to build apps for iOS, Android, and the web as a Progressive Web App. Claims to power roughly 15% of all mobile apps.
  • Reasonably good keyboard support, however:
  • Changing the month and year via the keyboard feels cumbersome.
  • You cannot escape out of the `month-year` view.
  • When some dates are disabled, you can no longer select any of the remaining dates.
  • You cannot delete or backspace to clear an inline datepicker, however you may add a clear button.

Kendo UI

 

(UI Framework)

npmjsGitHub

Click the link above to see an example

Weekly downloads:
0
GitHub stars:
3,800
Watching:
55
Forks:
722
Issues:
318
Pull requests:
18

Notes:

  • Cannot open the datepicker via the spacebar or enter keys
  • Elements are not focus-trapped; tabbing from a focused date/month/year simply closes the datepicker.
  • Does not feature `disabled dates`.
  • Impossible to clear an inline date once it's selected.

Prime Vue

 

(UI Framework)

npmjsGitHub

Click the link above to see an example

Weekly downloads:
87,658
GitHub stars:
3,804
Watching:
55
Forks:
722
Issues:
319
Pull requests:
18

Notes:

  • Excellent keyboard support.
  • Does not feature `disabled dates`.
  • Impossible to clear an inline date once it's selected.

Vuestic

 

(UI Framework)

npmjsGitHub

Click the link above to see an example

Weekly downloads:
2,575
GitHub stars:
2,735
Watching:
29
Forks:
244
Issues:
319
Pull requests:
20

Notes:

  • Does not open with spacebar, only enter.
  • Does not close on selecting a date.
  • Although you can arrow through the days, months and years, you cannot arrow beyond the current day/month/year.
  • Elements are not focus-trapped; tabbing from a focused date leaves the datepicker open and continues to focus other elements on the page.

Ant Design Vue

 

(UI Framework)

npmjsGitHub

Click the link above to see an example

Weekly downloads:
93,520
GitHub stars:
18,166
Watching:
304
Forks:
3,521
Issues:
147
Pull requests:
21

Notes:

  • Impossible to clear a date once you've selected one.
  • Although you can arrow through the days, you cannot arrow through the months or years (and tabbing closes the datepicker).
  • Elements are not focus-trapped; tabbing from a focused date closes the datepicker.

Quasar

 

(UI Framework)

npmjsGitHub

Click the link above to see an example

Weekly downloads:
111,854
GitHub stars:
23,555
Watching:
472
Forks:
3,190
Issues:
382
Pull requests:
100

Notes:

  • Cannot arrow through the dates, months or years (you can only tab).
  • Elements are not focus-trapped; tabbing should not cycle through every focusable element.
  • When you select a month or year, the focus is lost entirely.

Vuetify

 

(UI Framework)

npmjsGitHub

Click the link above to see an example

Weekly downloads:
451,086
GitHub stars:
37,205
Watching:
603
Forks:
6,788
Issues:
983
Pull requests:
124

Notes:

  • Vue 3 version not available until Q2 2023.
  • Cannot arrow through the dates, months or years in the Vue 2 version (you can only tab).
  • Elements are not focus-trapped; tabbing should not cycle through every focusable element.
  • When you select a month or year, the focus is lost entirely.

BootstrapVue

 

(UI Framework)

npmjsGitHub

Click the link above to see an example

Weekly downloads:
346,285
GitHub stars:
14,308
Watching:
302
Forks:
1,908
Issues:
150
Pull requests:
30

Notes:

  • Not yet Vue 3 compatible - requires @vue-compat.
  • Excellent keyboard support, but has some drawbacks e.g. you cannot use the delete or backspace keys (or click on the same date again on an inline datepicker) to clear a date. However, you can add a `clear` button via a default slot.
  • Vue 2 version appears to require 31.16 KB of JS and 31.46 KB of CSS = 62.62 KB total.

FormKit

 

(UI Framework)

npmjsGitHub

Click the link above to see an example

Weekly downloads:
391
GitHub stars:
2,843
Watching:
28
Forks:
114
Issues:
52
Pull requests:
2

Notes:

  • Only available in paid-for version.
  • Reasonably good keyboard support (at as Beta 17), but:
  • Selecting a date via the enter key causes the datepicker to refresh and no date is selected.
  • Picker crashes after changing the `year` view page, requiring a full page refresh.