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><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
<template>
<VueDatePicker v-model="date" :teleport="true" />
</template>
<script setup>
import { ref } from 'vue';
const date = ref(new Date());
</script><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><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><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><template>
<VueDatePicker v-model="date" teleport-center />
</template>
<script setup>
import { ref } from 'vue';
const date = ref(new Date());
</script>