Vuetify: [Bug Report] add keyboard controls to v-datepicker

[bigal41]

Problem to solve

Currently user's need to use the mouse to select date. Which is not very quick and efficient.

Proposed solution

Use the arrow keys to move around the calendar when it is open. Press enter to select the date the user has currently selected.

[robws]

This impacts keyboard accessibility. Is there any update on this?

[bob-lee]

May sound outdated but we also have a need for this feature, we have forms to be filled repeatedly and some users prefer using keyboard only.

[jacekkarczmarczyk]

I've changed this issue to refer only to datepicker and created a separate issue for time picker

[pdcmoreira]

Meanwhile, I've wrapped it in a custom component and implemented basic keyboard navigation.
Holding shift while pressing left or right, goes to previous or next month, respectively.

Note: This implementation uses moment to simplify date manipulation.

DateField.vue

<template>
  <div ref="container">
    <v-menu
      :attach="$refs.container"
      transition="scale-transition"
      full-width
      min-width="290px"
      :close-on-content-click="false"
      v-model="showMenu"
    >
      <template #activator="{on}">
        <v-text-field
          ref="textField"
          prepend-icon="mdi-calendar"
          label="Date"
          readonly
          :value="value"
          v-on="on"
          @keydown.up="up"
          @keydown.down="down"
          @keydown.left="left"
          @keydown.right="right"
          @keydown.enter="dateSelected"
          @focus="$emit('focus')"
        ></v-text-field>
      </template>

      <v-date-picker
        ref="datePicker"
        no-title
        scrollable
        :value="value"
        @click:date="dateSelected"
        @change="$emit('input', $event)"
      ></v-date-picker>
    </v-menu>
  </div>
</template>

md5-669ae25b6e52822cccb8f60a108d9111

[martinmckenna]

This is ridiculous how little Vuetify cares about accessibility. Same issue as the VSelect in that keyboard arrow commands don't work out of the box.

Pls fix

[bob-lee]

I now feel like keyboard support may be a separate functionality. In my case, I made text field editable and handle blur event where I assign date picker model, that way I managed to add keyboard support with data picker intact.

<v-menu
  v-model="myDateShown"
  ...
>
  <template v-slot:activator="{ on }">
    <v-text-field
      v-model="keyboardEntered"
      @blur="handleBlur"
      v-on="on"
    ></v-text-field>
  </template>
  <v-date-picker
    v-model="myObject.myDate"
    @input="myDateShown = false"
  ></v-date-picker>
</v-menu>

    handleBlur(e) {
      this.myObject.myDate = // assign parsed value from this.keyboardEntered
      setTimeout(() => this.myDateShown = false, 100)
    }

[RiqueBR]

Hi, thanks for all of the improvements already. I'm just wondering if navigation with arrow keys on dates, months and years is something that is on the pipeline?

[jacekkarczmarczyk]

Yes, planned for 3.0, nothing set in stone though

[candu]

Note also that formatting together with reasonable label / message cues and an editable <v-text-field> can help the user fill in dates using the keyboard, even without full keyboard navigability of the calendar dropdown.

[johnleider]

Saving this for reference to the native date picker: https://codepen.io/johnjleider/pen/wvWbmdj?editors=101