Vue DatepickerKeyboard
Configure keyboard actions
Info
- When checking the examples, for
booleanprop types, the example will show the behavior opposite of what is set for the default value - If you use the component in the browser
<script>tag, make sure to pass multi-word props with-, for example,escCloseasesc-closeand so on
Info
You can press tab key in the menu, and it will autofocus elements, pressing enter will do a click action like open overlay or select a date.
All keyboard events are enabled by default
esc-close
Esc key closes the menu
- Type:
boolean - Default:
true
Code Example
vue
<template>
<VueDatePicker v-model="date" :esc-close="false" />
</template>
<script setup>
import { ref } from 'vue';
const date = ref(new Date());
</script><template>
<VueDatePicker v-model="date" :esc-close="false" />
</template>
<script setup>
import { ref } from 'vue';
const date = ref(new Date());
</script>space-confirm
space key selects the date (like you pressed the select button)
- Type:
boolean - Default:
true
Code Example
vue
<template>
<VueDatePicker v-model="date" :space-confirm="false" />
</template>
<script setup>
import { ref } from 'vue';
const date = ref(new Date());
</script><template>
<VueDatePicker v-model="date" :space-confirm="false" />
</template>
<script setup>
import { ref } from 'vue';
const date = ref(new Date());
</script>month-change-on-arrows
Change months via arrow keys
- Type:
boolean - Default:
true
Code Example
vue
<template>
<VueDatePicker v-model="date" :month-change-on-arrows="false" />
</template>
<script setup>
import { ref } from 'vue';
const date = ref(new Date());
</script><template>
<VueDatePicker v-model="date" :month-change-on-arrows="false" />
</template>
<script setup>
import { ref } from 'vue';
const date = ref(new Date());
</script>arrow-navigation
By default, arrow keys will change the current month. When enabling this prop, you can navigate the menu via arrow keys instead of using tabs
Info
arrowNavigation is not supported with the multi-calendars prop
- Type:
boolean - Default:
false
Code Example
vue
<template>
<VueDatePicker v-model="date" arrow-navigation />
</template>
<script setup>
import { ref } from 'vue';
const date = ref(new Date());
</script><template>
<VueDatePicker v-model="date" arrow-navigation />
</template>
<script setup>
import { ref } from 'vue';
const date = ref(new Date());
</script>