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, altPosition as alt-position and 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>

Released under the MIT License.