-
-
Notifications
You must be signed in to change notification settings - Fork 176
Description
Describe the bug
When using the dp-input slot with a custom input element, calling the exposed onInput function no longer updates the model value in version 12.1.0. This is a regression from version 12.0.5 where the same code works correctly.
To Reproduce
Steps to reproduce the behavior:
- Use VueDatePicker with the dp-input slot
- Provide a custom input element
- Call the exposed onInput function when the input value changes
- Type a valid date in the input field
<template>
<VueDatePicker
v-model="date"
model-type="yyyy-MM-dd"
:formats="{ input: 'dd-MMM-yyyy' }"
:auto-apply="true"
>
<template #dp-input="{ value, onInput, onClear }">
<input
type="text"
:value="value"
@input="handleInput($event, onInput, onClear)"
/>
</template>
</VueDatePicker>
<div>Model value: {{ date }}</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { VueDatePicker } from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';
const date = ref();
const handleInput = (e: Event, onInputFn: (e: Event) => void, onClearFn: (e: Event) => void) => {
if (e.target instanceof HTMLInputElement && e.target.value === '') {
onClearFn(e);
return;
}
onInputFn(e);
};
</script>
Expected Behavior
When typing a valid date (e.g., "18-Dec-2025") in the custom input and the onInput function is called:
The date should be parsed according to the formats.input format
The model value should be updated to the parsed date in modelType format (e.g., "2025-12-18")
This works correctly in v12.0.5.
Stackblitz Links
v12.0.5 (Working): https://stackblitz.com/edit/github-bgfv7iv5-cb6jnnet?file=src%2Fviews%2FHome.vue
v12.1.0 (Broken): https://stackblitz.com/edit/github-bgfv7iv5-9nahr6kn?file=src%2Fviews%2FHome.vue
Video