Open deathland09 opened 1 year ago
It would be better if you use 2 inputs when customizing because it gives an object as inputvalue {"start":"...", "end": "..""} when you use range picker. Don't forget to set the v-if according to itself.
<template #default="{ inputValue, inputEvents }"> <input v-if="$attrs.isRange" type="text" :value="inputValue" v-on="inputEvents" /> <input v-else :value="inputValue.start + ' - ' + inputValue.end" type="text" readonly v-on="inputEvents.start" /> </template>
I just encountered this case while trying to make range mode dynamic. Finally I reach this goal by using ternary on the event bound to my slot input plus an helper fonction for data format 👌
No duplicated input:
<template #default="{ inputValue, inputEvents }">
<input
v-on="isRange ? inputEvents.start : inputEvents"<---- range mode required inputEvents.start
:value="formatDate(inputValue)"
/>
formatDate(data) {
return this.isRange ? `${data.start} - ${data.end}` : data;
},
When I add is-range: true to v-date-picker component with custom slot input (to enable popover calendar).
Event not trigger anymore but remove is-range is okay.
`<v-date-picker v-model="form.block_date" mode="date" class="v-calendar" color="red" :masks="formats"