Vue DatepickerPositioning
Configure datepicker menu positioning
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,autoPositionasauto-positionand so on
position
Datepicker menu position
- Type:
'left' | 'center' | 'right' - Default:
'center'
Code Example
<template>
<VueDatePicker v-model="date" position="left" />
</template>
<script setup>
import { ref } from 'vue';
const date = ref(new Date());
</script>teleport
Use teleport to position the datepicker menu. This is useful if you have hidden overflow on the parent HTML element where the menu is not showing in full. If you just set the value to true, the menu will be placed on body
- Type:
boolean | string - Default:
null
Note
In case you are enabling teleport to the default value (<body>), make sure to explicitly set it to true to prevent conflict with the built-in <teleport> component
Code Example
<template>
<VueDatePicker v-model="date" :teleport="true" />
</template>
<script setup>
import { ref } from 'vue';
const date = ref(new Date());
</script>alt-position
If you have issues with the menu being miss-placed, you can use custom function that can position the menu to your liking
- Type:
(el: HTMLElement) => ({ top: number; left: number; transform: string }) - Default:
null
Code Example
<template>
<VueDatePicker v-model="date" :alt-position="customPosition" />
</template>
<script setup>
import { ref } from 'vue';
const date = ref(new Date());
const customPosition = () => ({ top: 0, left: 0 });
</script>auto-position
When enabled, based on viewport space available it will automatically position the menu above or bellow input field
- Type:
boolean - Default:
true
Code Example
<template>
<VueDatePicker v-model="date" :auto-position="false" />
</template>
<script setup>
import { ref } from 'vue';
const date = ref(new Date());
</script>teleport-center
Sets the menu position on the page center, useful for smaller screens where there is no space available above or bellow the input field
- Type:
boolean - Default:
false
Code Example
<template>
<VueDatePicker v-model="date" teleport-center />
</template>
<script setup>
import { ref } from 'vue';
const date = ref(new Date());
</script>allow-prevent-default
Due to the different implementations of how click outside listeners are implemented, you might encounter issues where the menu closes if the picker is used in dialogs when teleport prop is enabled. To prevent this issue, you need to set this option to true
Note
When this option is enabled, input elements passed in custom slots might not work properly
- Type:
boolean - Default:
false
Code Example
<template>
<VueDatePicker v-model="date" allow-prevent-default />
</template>
<script setup>
import { ref } from 'vue';
const date = ref(new Date());
</script>