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

<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

<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>