[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.

[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>

<script>
import moment from 'moment'

export default {
  props: {
    value: {
      type: String,
      required: true
    },

    show: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      showMenu: false
    }
  },

  watch: {
    show: {
      immediate: true,

      handler(show) {
        show = show === true || show === false ? show : false

        this.toggleMenu(show, false)
      }
    }
  },

  methods: {
    toggleMenu(show = null, emit = true) {
      show = show !== null ? show : !this.showMenu

      if (show === this.showMenu) {
        return
      }

      this.showMenu = show

      if (emit) {
        this.$emit('update:show', show)
      }
    },

    dateSelected() {
      this.toggleMenu(false)
      this.$emit('date-selected')
    },

    // keyboard navigation

    pickModified(modifier) {
      this.$refs.datePicker.dateClick(
        modifier(moment(this.$refs.datePicker.inputDate)).format('YYYY-MM-DD')
      )
    },

    up() {
      this.pickModified(m => m.subtract(1, 'weeks'))
    },

    down() {
      this.pickModified(m => m.add(1, 'weeks'))
    },

    left(e) {
      this.pickModified(m =>
        e.shiftKey ? m.subtract(1, 'month') : m.subtract(1, 'days')
      )
    },

    right(e) {
      this.pickModified(m =>
        e.shiftKey ? m.add(1, 'month') : m.add(1, 'days')
      )
    }
  }
}
</script>

[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)
    }

[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