Skip to content
On this page

Positioning

Configure datepicker menu positioning

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, autoPosition as auto-position and so on

position

Datepicker menu position

  • Type: 'left' | 'center' | 'right'
  • Default: 'center'
Code Example
vue
<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
vue
<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
vue
<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
vue
<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
vue
<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
vue
<template>
    <VueDatePicker v-model="date" allow-prevent-default />
</template>

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

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

Released under the MIT License.