Keyboard
Configure keyboard actions
Info
- When checking the examples, for
boolean
prop 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,escClose
asesc-close
and 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>
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>
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>
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>