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

Connecting text input with date picker

If you want to connect text-input with a custom input element, a text-input prop must be provided.

If using auto-apply, you should connect at least the on-focus and on-blur methods. Connecting all methods is recommended.

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

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: (ev: KeyboardEvent) => void
• onTab: Function called on the @keydown.tab event
  • type: (ev: KeyboardEvent, fromInput?: boolean) => void
• onClear: Function to call if you want to clear date
  • type: (ev?: Event) => void
• onFocus: Function to call on input focus
  • 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
• openMenu: Open menu
  • type: () => void
• closeMenu: Close menu
  • type: () => void
• toggleMenu: Toggle menu
  • 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>