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 as esc-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

<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

<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

<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

<template>
    <VueDatePicker v-model="date" arrow-navigation />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>