Can't Open With Keyboard

[scriptype]

I've tried pressing space, enter, and down arrow key to open datepicker popup. None worked. I couldn't see anything related to keyboard events or manually triggering in docs, either. I think there should be some way to use datepicker with only keyboard.

Maybe this can help: https://www.w3.org/blog/wai-components-gallery/widget/datepicker/

[aledujke]

Is there a plan to add keyboard support? I'm baffled that there is not a single mention about it.

[chriszrc]

At a minimum, it should be possible to at least tab to the optional calendar-button, which could provide an option to support keyboard navigation. It would also be nice if there was some way to select a date as well with the keyboard once the calendar has opened

[adabutch]

Anyone know of plans to address this?

(or know of a Fork/PR that already has?)

[aledujke]

I made some changes to enable keyboard support, it's very... proof of concept-ish, It works okay but is far from being ready for a PR or something.

https://github.com/aledujke/vuejs-datepicker/tree/keyboard-support

[fredikey]

@aledujke Sorry for this maybe stupid question.. What i need to install your fork as node module for my project?

[aledujke]

@fredikey
Clone my fork, then checkout the keyboard_support branch and run "yarn build", then take a look at dist folder. Copy locale folder and vuejs-datepicker.esm.js from it to some folder in your project, then rename "vuejs-datepicker.esm.js" to index.js

Then import it like this:
import Datepicker from '@/utils/datepicker/'
import { srCYRL } from '@/utils/datepicker/locale'

You will then have a build with support to open on enter, or arrow keys. Arrow keys also move the selection of date once it's opened.

What does not work currently is proper handling of disabled dates. I don't look up to see if the date I'm trying to select is selectable or not and so you can select a disabled date.

The inbuilt tests are all passing so I'm hopeful that I'm not introducing some bug.

The code I added is hacky and DRY :/

As it turns out I don't need arrow key support and so I will not continue to work on it and try and to make a proper PR. My priority is adding input formatting support. Which I already did actually, it's on the separate branch of that same repo. But I'm not sure what is going on with the maintainer and if they are even willing to consider a PR

[aledujke]

One more thing!

If you comment out the lines in Datepicker.vue:460-462 you would be able to use arrow key's along with typeable calendar. I disabled it cause it did not make sense to me to have both enabled. You will lose the ability to move cursor left and right in the input field.

Also before doing "yarn build" you have to install yarn globally and then ran "yarn install" like you would normally do "npm install" to install dependencies needed for the build etc.

[renestalder]

Oh uff, someone mind to add this as a big note to the readme that there is no keyboard support? I expect keyboard support to be the standard. Quite surprised after implementation that there is not even the minimal amount of keyboard support. Would be nice others don't have to find out that late as I did.

[mst101]

Good news! If you're looking for a fork of this vuejs-datepicker project which has implemented keyboard support, check this out:

https://sumcumo.github.io/vue-datepicker/

It was a lot more difficult than I expected - and has taken me well over a year to complete (elapsed time) - but you can now interact with the datepicker using spacebar, tab, enter, escape, backspace, delete as well as the arrow keys.

We tried to emulate the way Chrome implements <input type="date"> (see example) i.e. by 'focus-trapping' certain elements (which you can tab through) when the calendar is open.

You now even get a nice slide transition when changing month/year/decade - and the functionality is backed up by a suite of e2e tests in Cypress / cucumber.

Give it a try - and if you like it, give us a little star. It'll make us happy ;-)