nathanreyes / v-calendar

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

v-calendar slot in range with nuxtjs dont work #1487

Open TimotheDavid opened 3 months ago

TimotheDavid commented 3 months ago

hello I have a small problem ... I cannot slot vcalendar with nuxtjs

I use vue 3.4.27 and v-calendar 3.1.2

this is my code and I don't understand really how to use BaseInput .... ( how can I import it .... thanks for all !

    <div class="w-full">
      <Label class="grid w-full max-w-sm items-center gap-1.5 my-2"><slot name="title"></slot></Label>
      <VDatePicker v-model="range" is-range>
        <template #default="{ inputValue, inputEvents }">
          <div class="flex items-center w-full justify-between">
            <Input
              :value="range.start"
              v-on="inputEvents.start"
              class="mr-2"
            />
            <ChevronRight class="w-20" />
            <Input
              class="ml-2"
              v-model="inputValue.end"
              v-on="inputEvents.end"
            />
          </div>
        </template>
      </VDatePicker>
    </div>
  </div>

my IDE ( webstom tell me : that i donest recognize default template ....

image

yenpu commented 1 month ago

Hi TimotheDavid,

I have struggle with the BaseInput as well and finally the code below works for me

<VDatePicker v-model="range" locale="zh-TW" is-range>
  <template #default="{ inputValue, inputEvents }">
    <input :value="inputValue.start" placeholder="YYYY/MM/DD" class="ui mini input" v-on="inputEvents.start">
    <span><img src="/tilde.png" alt="tilde" /></span>
    <input :value="inputValue.end" placeholder="YYYY/MM/DD" class="ui mini input" v-on="inputEvents.end">
  </template>
</VDatePicker>

I hope it helps.