Skip to content
On this page

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>
    <Datepicker v-model="date">
        <template #trigger>
            <p class="clickable-text">This is some custom clickable text that will open the datepicker</p>
        </template>
    </Datepicker>
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            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
  • onInput: Function called on the @input event
    • type: (event: Event) => 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
Code Example
vue
<template>
    <Datepicker v-model="date">
        <template #dp-input="{ value, onInput, onEnter, onTab, onClear }">
          <input type="text" :value="value" />
        </template>
    </Datepicker>
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

Released under the MIT License.