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>
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
- type:
isMenuOpen
: Get info if the menu is in the open state- type:
boolean
- type:
onInput
: Function called on the@input
event- type:
(event: Event | string) => void
- type:
onEnter
: Function called on the@keydown.enter
event- type:
(ev: KeyboardEvent) => void
- type:
onTab
: Function called on the@keydown.tab
event- type:
(ev: KeyboardEvent, fromInput?: boolean) => void
- type:
onClear
: Function to call if you want to clear date- type:
(ev?: Event) => void
- type:
onFocus
: Function to call on input focus- type:
() => void
- type:
onBlur
: Function to call on input blur- type:
() => void
- type:
onKeypress
: Function to call on key press- type:
(event: KeyboardEvent) => void
- type:
onPaste
: Function to call on paste- type:
() => void
- type:
openMenu
: Open menu- type:
() => void
- type:
closeMenu
: Close menu- type:
() => void
- type:
toggleMenu
: Toggle menu- type:
() => void
- type:
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>