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,altPositionasalt-positionand so on
position
Datepicker menu position
- Type:
'left' | 'center' | 'right' - Default:
'center'
Code Example
vue
<template>
<Datepicker v-model="date" position="left" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</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>
<Datepicker v-model="date" :auto-position="false" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
alt-position
If you have issues with the menu being miss-placed, you can enable this prop to use an alternative positioning method. By default, if passed true, datepicker will use an alternative function to recalculate position, but you can also pass a custom function that can position the menu to your liking
- Type:
boolean | ((el: HTMLElement | undefined) => { top: string; left: string; transform: string }) - Default:
false
Code Example
vue
<template>
<Datepicker v-model="date" alt-position />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
teleport
Set teleport target
- Type:
string | HTMLElement - Default:
'body'
You can inspect the page and check the menu placement
Code Example
vue
<template>
<Datepicker v-model="date" teleport="#app" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
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>
<Datepicker v-model="date" teleport-center />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>