nathanreyes / v-calendar

An elegant calendar and datepicker plugin for Vue.
https://vcalendar.io
MIT License
4.32k stars 840 forks source link

Can't using is-range with custom slot input #1217

Open deathland09 opened 1 year ago

deathland09 commented 1 year ago

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"

`

samedkucuk commented 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>

MartinClement commented 4 months ago

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;
},