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
- type:
onInput
: Function called on the@input
event- type:
(event: Event) => void
- type:
onEnter
: Function called on the@keydown.enter
event- type:
() => void
- type:
onTab
: Function called on the@keydown.tab
event- type:
() => void
- type:
onClear
: Function to call if you want to clear date- type:
() => void
- type:
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>