Trigger and input ​

Use custom input or trigger element

trigger ​

This slot replaces the input element with your custom element

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

• 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

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