Vue DatepickerTrigger 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@inputevent- type:
(event: Event) => void
- type:
onEnter: Function called on the@keydown.enterevent- type:
() => void
- type:
onTab: Function called on the@keydown.tabevent- 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>