Skip to content

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

Default transitions for menu open and close will not work with the teleport enabled

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

Note

Combination with teleport prop may introduce incorrect positioning

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>

Released under the MIT License.