Trigger and input

Use custom input or trigger element

trigger

This slot replaces the input element with your custom element

This is some custom clickable text that will open datepicker

Code Example

vue

<template>
    <VueDatePicker v-model="date">
        <template #trigger>
            <p class="clickable-text">This is some custom clickable text that will open the datepicker</p>
        </template>
    </VueDatePicker>
</template>

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

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

<style>
    .clickable-text {
        color: #1976d2;
        cursor: pointer;
    }
</style>

<template>
    <VueDatePicker v-model="date">
        <template #trigger>
            <p class="clickable-text">This is some custom clickable text that will open the datepicker</p>
        </template>
    </VueDatePicker>
</template>

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

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

<style>
    .clickable-text {
        color: #1976d2;
        cursor: pointer;
    }
</style>

dp-input

This slot replaces the input field. The difference from the trigger slot is that you will have access to the input field properties

Available props are:

TIP

For functions to work correctly, make sure that the text-input prop is enabled

When calling onInput function, make sure to pass the input event as an argument

value: Value displayed in the input field
- type: string
isMenuOpen: Get info if the menu is in the open state
- type: boolean
onInput: Function called on the @input event
- type: (event: Event | string) => void
onEnter: Function called on the @keydown.enter event
- type: () => void
onTab: Function called on the @keydown.tab event
- type: () => void
onClear: Function to call if you want to clear date
- type: () => void
onBlur: Function to call on input blur
- type: () => void
onKeypress: Function to call on key press
- type: (event: KeyboardEvent) => void
onPaste: Function to call on paste
- type: () => void

Code Example

vue

<template>
    <VueDatePicker v-model="date">
        <template #dp-input="{ value, onInput, onEnter, onTab, onClear, onBlur, onKeypress, onPaste, isMenuOpen }">
          <input type="text" :value="value" />
        </template>
    </VueDatePicker>
</template>

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

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

<template>
    <VueDatePicker v-model="date">
        <template #dp-input="{ value, onInput, onEnter, onTab, onClear, onBlur, onKeypress, onPaste, isMenuOpen }">
          <input type="text" :value="value" />
        </template>
    </VueDatePicker>
</template>

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

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

Trigger and input ​

trigger ​

dp-input ​

Trigger and input

trigger

dp-input